Published on

How to Build A Font Preview With Tailwind CSS?

Font Preview

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to rapidly build custom user interfaces. It provides a set of pre-defined classes that can be used to style HTML elements without writing any custom CSS. This makes it easy for developers to create consistent and responsive designs without spending too much time on styling.

The description of Font Preview ui component

A font preview UI component is a user interface element that allows users to preview different fonts before selecting one. It is commonly used in applications that allow users to customize the appearance of text, such as word processors or website builders.

Why use Tailwind CSS to create a Font Preview ui component?

Tailwind CSS is an ideal choice for creating a font preview UI component because it provides a set of pre-defined classes that can be used to style HTML elements. This allows developers to focus on the functionality of the component rather than spending too much time on styling. Additionally, Tailwind CSS is highly customizable, which means that developers can easily modify the appearance of the component to match the design of their application.

The preview of Font Preview ui component

Free download of the Font Preview's source code

The source code of Font Preview ui component

<script src="[email protected]/dist/alpine.js" defer></script>
<style>@import url(;</style>
module.exports = {
    plugins: [require('@tailwindcss/forms'),]
.form-radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  flex-shrink: 0;
  border-radius: 100%;
  border-width: 2px;

.form-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns=''%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

@media not print {
  .form-radio::-ms-check {
    border-width: 1px;
    color: transparent;
    background: inherit;
    border-color: inherit;
    border-radius: inherit;

.form-radio:focus {
  outline: none;

.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='' viewBox='0 0 24 24' fill='%23a0aec0'%3e%3cpath d='M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z'/%3e%3c/svg%3e");
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
  background-repeat: no-repeat;
  padding-top: 0.5rem;
  padding-right: 2.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;

.form-select::-ms-expand {
  color: #a0aec0;
  border: none;

@media not print {
  .form-select::-ms-expand {
    display: none;

@media print and (-ms-high-contrast: active), print and (-ms-high-contrast: none) {
  .form-select {
    padding-right: 0.75rem;

/* @apply rules for documentation, these do not work as inline style */
.toggle-checkbox:checked {
  @apply: right-0 border-transparent;
  right: 0;
  border-color: transparent;
.toggle-checkbox:checked + .toggle-label {
  /*@apply: bg-green-400;*/
  /*background-color: #68D391;*/

<div class="min-w-screen min-h-screen bg-gray-800 flex items-center justify-center px-5 py-5">
    <div class="w-full mx-auto bg-white shadow text-gray-700 max-w-4xl" x-data="app()">
        <div class="md:flex">
            <div class="md:w-1/2 p-10 flex items-center justify-center text-center transition-colors" :class="darkMode?`bg-${color}-500 text-white`:`text-${color}-500 bg-white`" :style="`font-family: '${selectedFont}', sans-serif;`">
                    <h1 class="leading-none" :class="fontStyle" :style="`font-size: ${fontSize}rem`">Ab</h1>
                    <p class="text-lg"><span x-text="selectedFont"></span></p>
                    <div class="mt-8">
                        <label for="toggle" class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
                            <input id="toggle" type="checkbox" class="toggle-checkbox absolute block w-4 h-4 mt-1 mx-1 rounded-full bg-white border-none appearance-none cursor-pointer outline-none focus:outline-none transition-all" x-model="darkMode" value="1"/>
                            <span class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-900 bg-opacity-20 cursor-pointer focus:outline-none transition-all"></span>
            <div class="md:w-1/2 px-10 py-14">
                <div class="mb-3">
                    <label class="block font-medium text-xs ml-1 text-gray-400">Font</label>
                        <select class="w-full form-select pl-1 mb-1 border-b-2 border-gray-200 focus:outline-none focus:border-indigo-500 transition-colors cursor-pointer" x-model="selectedFont">
                            <template x-for="font in googleFonts">
                                <option :value="font" x-text="font" :selected="selectedFont==font"></option>
                <div class="mb-3">
                    <label class="block font-medium text-xs ml-1 text-gray-400">Style</label>
                        <select class="w-full form-select pl-1 mb-1 border-b-2 border-gray-200 focus:outline-none focus:border-indigo-500 transition-colors cursor-pointer" x-model="fontStyle">
                            <option value="normal" selected>Normal</option>
                            <option value="italic">Italic</option>
                <div class="mb-4">
                    <label class="block font-medium text-xs mb-2 ml-1 text-gray-400">Color</label>
                        <input type="radio" class="form-radio h-10 w-10 text-blue-500 bg-blue-500 border-white" x-model="color" value="blue" checked>
                        <input type="radio" class="form-radio h-10 w-10 text-indigo-500 bg-indigo-500 border-white" x-model="color" value="indigo">
                        <input type="radio" class="form-radio h-10 w-10 text-red-500 bg-red-500 border-white" x-model="color" value="red">
                        <input type="radio" class="form-radio h-10 w-10 text-yellow-500 bg-yellow-500 border-white" x-model="color" value="yellow">
                        <input type="radio" class="form-radio h-10 w-10 text-green-500 bg-green-500 border-white" x-model="color" value="green">
                        <input type="radio" class="form-radio h-10 w-10 text-gray-500 bg-gray-500 border-white" x-model="color" value="gray">
                <div class="">
                    <label class="block font-medium text-xs mb-2 ml-1 text-gray-400">Size</label>
                        <input class="w-full" type="range" x-model="fontSize" min="4" max="12" step="1">
        <link rel="preconnect" href="">
        <link :href="`${selectedFont}&display=swap`" rel="stylesheet">

function app(){
    return {
        darkMode: 1,
        fontSize: 9,
        fontStyle: 'normal',
        color: 'blue',
        selectedFont: "Alfa Slab One",
        googleFonts: [
            "Abhaya Libre",
            "Abril Fatface",
            "Advent Pro",
            "Aguafina Script",
            "Alegreya SC",
            "Alegreya Sans",
            "Alegreya Sans SC",
            "Alex Brush",
            "Alfa Slab One",
            "Alike Angular",
            "Allerta Stencil",
            "Almendra Display",
            "Almendra SC",
            "Amatic SC",
            "Amatica SC",
            "Annie Use Your Telescope",
            "Anonymous Pro",
            "Antic Didone",
            "Antic Slab",
            "Arbutus Slab",
            "Architects Daughter",
            "Archivo Black",
            "Archivo Narrow",
            "Aref Ruqaa",
            "Arima Madurai",
            "Atomic Age",
            "Autour One",
            "Average Sans",
            "Averia Gruesa Libre",
            "Averia Libre",
            "Averia Sans Libre",
            "Averia Serif Libre",
            "Bad Script",
            "Baloo Bhai",
            "Baloo Bhaina",
            "Baloo Chettan",
            "Baloo Da",
            "Baloo Paaji",
            "Baloo Tamma",
            "Baloo Thambi",
            "Berkshire Swash",
            "Bigelow Rules",
            "Bigshot One",
            "Bilbo Swash Caps",
            "BioRhyme Expanded",
            "Black Ops One",
            "Bowlby One",
            "Bowlby One SC",
            "Bree Serif",
            "Bubblegum Sans",
            "Bubbler One",
            "Bungee Hairline",
            "Bungee Inline",
            "Bungee Outline",
            "Bungee Shade",
            "Butterfly Kids",
            "Cabin Condensed",
            "Cabin Sketch",
            "Caesar Dressing",
            "Cantata One",
            "Cantora One",
            "Carrois Gothic",
            "Carrois Gothic SC",
            "Carter One",
            "Caveat Brush",
            "Cedarville Cursive",
            "Ceviche One",
            "Changa One",
            "Chau Philomene One",
            "Chela One",
            "Chelsea Market",
            "Cherry Cream Soda",
            "Cherry Swash",
            "Cinzel Decorative",
            "Clicker Script",
            "Coda Caption",
            "Coming Soon",
            "Concert One",
            "Contrail One",
            "Cormorant Garamond",
            "Cormorant Infant",
            "Cormorant SC",
            "Cormorant Unicase",
            "Cormorant Upright",
            "Covered By Your Grace",
            "Crafty Girls",
            "Crete Round",
            "Crimson Text",
            "Croissant One",
            "Cutive Mono",
            "Dancing Script",
            "David Libre",
            "Dawning of a New Day",
            "Days One",
            "Delius Swash Caps",
            "Delius Unicase",
            "Della Respira",
            "Denk One",
            "Didact Gothic",
            "Diplomata SC",
            "Donegal One",
            "Doppio One",
            "Dr Sugiyama",
            "Droid Sans",
            "Droid Sans Mono",
            "Droid Serif",
            "Duru Sans",
            "EB Garamond",
            "Eagle Lake",
            "Ek Mukta",
            "El Messiri",
            "Elsie Swash Caps",
            "Emblema One",
            "Emilys Candy",
            "Erica One",
            "Euphoria Script",
            "Exo 2",
            "Expletus Sans",
            "Fanwood Text",
            "Fascinate Inline",
            "Faster One",
            "Fauna One",
            "Finger Paint",
            "Fira Mono",
            "Fira Sans",
            "Fjalla One",
            "Fjord One",
            "Fontdiner Swanky",
            "Francois One",
            "Frank Ruhl Libre",
            "Freckle Face",
            "Fredericka the Great",
            "Fredoka One",
            "Fugaz One",
            "GFS Didot",
            "GFS Neohellenic",
            "Gentium Basic",
            "Gentium Book Basic",
            "Geostar Fill",
            "Germania One",
            "Gilda Display",
            "Give You Glory",
            "Glass Antiqua",
            "Gloria Hallelujah",
            "Goblin One",
            "Gochi Hand",
            "Goudy Bookletter 1911",
            "Grand Hotel",
            "Gravitas One",
            "Great Vibes",
            "Hammersmith One",
            "Hanalei Fill",
            "Happy Monkey",
            "Headland One",
            "Henny Penny",
            "Herr Von Muellerhoff",
            "Hind Guntur",
            "Hind Madurai",
            "Hind Siliguri",
            "Hind Vadodara",
            "Holtwood One SC",
            "Homemade Apple",
            "IM Fell DW Pica",
            "IM Fell DW Pica SC",
            "IM Fell Double Pica",
            "IM Fell Double Pica SC",
            "IM Fell English",
            "IM Fell English SC",
            "IM Fell French Canon",
            "IM Fell French Canon SC",
            "IM Fell Great Primer",
            "IM Fell Great Primer SC",
            "Indie Flower",
            "Inknut Antiqua",
            "Irish Grover",
            "Istok Web",
            "Jacques Francois",
            "Jacques Francois Shadow",
            "Jim Nightshade",
            "Jockey One",
            "Jolly Lodger",
            "Josefin Sans",
            "Josefin Slab",
            "Joti One",
            "Julius Sans One",
            "Just Another Hand",
            "Just Me Again Down Here",
            "Kaushan Script",
            "Kdam Thmor",
            "Keania One",
            "Kelly Slab",
            "Kite One",
            "Kotta One",
            "Krona One",
            "Kumar One",
            "Kumar One Outline",
            "La Belle Aurore",
            "Lakki Reddy",
            "League Script",
            "Leckerli One",
            "Libre Baskerville",
            "Libre Franklin",
            "Life Savers",
            "Lilita One",
            "Lily Script One",
            "Linden Hill",
            "Lobster Two",
            "Londrina Outline",
            "Londrina Shadow",
            "Londrina Sketch",
            "Londrina Solid",
            "Love Ya Like A Sister",
            "Loved by the King",
            "Lovers Quarrel",
            "Luckiest Guy",
            "Macondo Swash Caps",
            "Maiden Orange",
            "Marcellus SC",
            "Marck Script",
            "Marko One",
            "Martel Sans",
            "Mate SC",
            "Maven Pro",
            "Medula One",
            "Meera Inimai",
            "Meie Script",
            "Merienda One",
            "Merriweather Sans",
            "Metal Mania",
            "Miltonian Tattoo",
            "Miriam Libre",
            "Miss Fajardose",
            "Modern Antiqua",
            "Monsieur La Doulaise",
            "Montserrat Alternates",
            "Montserrat Subrayada",
            "Mountains of Christmas",
            "Mouse Memoirs",
            "Mr Bedfort",
            "Mr Dafoe",
            "Mr De Haviland",
            "Mrs Saint Delafield",
            "Mrs Sheppards",
            "Mukta Vaani",
            "Mystery Quest",
            "New Rocker",
            "News Cycle",
            "Nixie One",
            "Nothing You Could Do",
            "Noticia Text",
            "Noto Sans",
            "Noto Serif",
            "Nova Cut",
            "Nova Flat",
            "Nova Mono",
            "Nova Oval",
            "Nova Round",
            "Nova Script",
            "Nova Slim",
            "Nova Square",
            "Nunito Sans",
            "Odor Mean Chey",
            "Old Standard TT",
            "Oleo Script",
            "Oleo Script Swash Caps",
            "Open Sans",
            "Open Sans Condensed",
            "Original Surfer",
            "Over the Rainbow",
            "Overlock SC",
            "Oxygen Mono",
            "PT Mono",
            "PT Sans",
            "PT Sans Caption",
            "PT Sans Narrow",
            "PT Serif",
            "PT Serif Caption",
            "Palanquin Dark",
            "Passero One",
            "Passion One",
            "Pathway Gothic One",
            "Patrick Hand",
            "Patrick Hand SC",
            "Patua One",
            "Paytone One",
            "Permanent Marker",
            "Petit Formal Script",
            "Pinyon Script",
            "Pirata One",
            "Playfair Display",
            "Playfair Display SC",
            "Poiret One",
            "Poller One",
            "Pontano Sans",
            "Port Lligat Sans",
            "Port Lligat Slab",
            "Pragati Narrow",
            "Press Start 2P",
            "Princess Sofia",
            "Prosto One",
            "Proza Libre",
            "Purple Purse",
            "Quattrocento Sans",
            "Racing Sans One",
            "Raleway Dots",
            "Rammetto One",
            "Ravi Prakash",
            "Reem Kufi",
            "Reenie Beanie",
            "Rhodium Libre",
            "Ribeye Marrow",
            "Roboto Condensed",
            "Roboto Mono",
            "Roboto Slab",
            "Rock Salt",
            "Ropa Sans",
            "Rouge Script",
            "Rozha One",
            "Rubik Mono One",
            "Rubik One",
            "Ruge Boogie",
            "Rum Raisin",
            "Ruslan Display",
            "Russo One",
            "Sansita One",
            "Scope One",
            "Seaweed Script",
            "Secular One",
            "Seymour One",
            "Shadows Into Light",
            "Shadows Into Light Two",
            "Share Tech",
            "Share Tech Mono",
            "Short Stack",
            "Sigmar One",
            "Signika Negative",
            "Sirin Stencil",
            "Six Caps",
            "Slabo 13px",
            "Slabo 27px",
            "Snowburst One",
            "Sofadi One",
            "Sonsie One",
            "Sorts Mill Goudy",
            "Source Code Pro",
            "Source Sans Pro",
            "Source Serif Pro",
            "Space Mono",
            "Special Elite",
            "Spicy Rice",
            "Squada One",
            "Sree Krushnadevaraya",
            "Stalinist One",
            "Stardos Stencil",
            "Stint Ultra Condensed",
            "Stint Ultra Expanded",
            "Sue Ellen Francisco",
            "Suez One",
            "Supermercado One",
            "Swanky and Moo Moo",
            "Tenali Ramakrishna",
            "Tenor Sans",
            "Text Me One",
            "The Girl Next Door",
            "Titan One",
            "Titillium Web",
            "Trade Winds",
            "Tulpen One",
            "Ubuntu Condensed",
            "Ubuntu Mono",
            "Uncial Antiqua",
            "Unica One",
            "Vampiro One",
            "Varela Round",
            "Vast Shadow",
            "Vesper Libre",
            "Waiting for the Sunrise",
            "Walter Turncoat",
            "Wendy One",
            "Wire One",
            "Work Sans",
            "Yanone Kaffeesatz",
            "Yatra One",
            "Yeseva One",

<div class="flex items-end justify-end fixed bottom-0 right-0 mb-4 mr-4 z-10">
        <a title="Buy me a beer" href="" target="_blank" class="block w-16 h-16 rounded-full transition-all shadow hover:shadow-lg transform hover:scale-110 hover:rotate-12">
            <img class="object-cover object-center w-full h-full rounded-full" src=""/>

How to create a Font Preview with Tailwind CSS?

To create a font preview UI component with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the necessary HTML elements for the font preview UI component. The component should include a text input field, a dropdown menu for selecting fonts, and a preview area where the selected font can be displayed.

  2. Add the necessary Tailwind CSS classes to the HTML elements. For example, you can use the bg-gray-100 class to set the background color of the preview area to gray.

  3. Use JavaScript to dynamically update the preview area when a new font is selected. You can use the font-family CSS property to change the font of the preview area.

  4. Customize the appearance of the component by modifying the Tailwind CSS classes. For example, you can use the text-2xl class to increase the font size of the preview area.

Here's an example of what the HTML and CSS code for a font preview UI component might look like:

<div class="p-4">
  <label for="font-select" class="block font-medium text-gray-700">Select a font:</label>
  <select id="font-select" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
    <option value="Arial">Arial</option>
    <option value="Helvetica">Helvetica</option>
    <option value="Times New Roman">Times New Roman</option>
    <option value="Courier New">Courier New</option>
    <option value="Verdana">Verdana</option>
  <label for="text-input" class="block mt-4 font-medium text-gray-700">Enter some text:</label>
  <input type="text" id="text-input" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
  <div id="preview" class="mt-4 bg-gray-100 p-4 font-medium"></div>
#preview {
  height: 200px;
  font-family: Arial;


In conclusion, Tailwind CSS is an excellent choice for creating a font preview UI component because it provides a set of pre-defined classes that can be used to style HTML elements. By following the steps outlined in this article, developers can easily create a font preview UI component that is both functional and visually appealing.