What is Tailwind CSS?

We all want to have a magic wand that makes our lives easier in our childhood. Sadly we can't get that in real life. But Tailwind CSS is no less than a Magic Band for you if you struggle with CSS.

As per official documentation Tailwind, CSS is A utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup. In simpler terms Tailwind CSS allows us to create beautiful elements without even writing a single line of CSS. But How?

It is done by using utility classes. Utility classes are nothing just some classes with predefined CSS properties in them. All we have to do is to add them to our HTML and boom 💥 you got your styling without even writing any CSS.

Why Tailwind CSS?

Tailwind CSS provides us the flexibility of styling elements independently.
No need to write even a single line of CSS.
Faster styling than CSS.
Working exclusively in HTML with utility classes improves productivity.
No more writing of 1000 lines of CSS.

Installation

In this article, we are going to use Tailwind by Play CDN. Surely there are some other ways too but using Play CDN is the most beginner friendly. P.S- Play CDN is best for learning purposes but not recommended in the development.

1. Add the Play CDN script to the HTML head section and start using the Tailwind CSS utility class.

  <!doctype html>
  <html>
      <head>
         <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          // Tailwind CSS Play CDN
          <script src="https://cdn.tailwindcss.com"></script>
      </head>
      <body>
          // text-3xl, font-bold and underline are utility classes
          <h1 class="text-3xl font-bold underline">
            Hello world!
          </h1>
      </body>
  </html>

text-3xl, font-bold, and underline are utility classes.

2. Edit tailwind.config object to customize your configuration with our own design tokens.

<script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>

3. Use type="text/tailwindcss" to add custom CSS that supports all of Tailwind's CSS features.

 <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
    }
  </style>

4. Enable first-party plugins, like forms and typography, using the plugins query parameter.

 <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

Handling Hover, focus, and other states.

We can apply any utility class conditionally using modifiers. Some common modifiers are:

Pseudo-classes - :hover, :active, :focus, :first-child

Pseudo-elements - ::before, ::after

<button class="bg-sky-500 hover:bg-sky-700 ...">
Save changes
</button>

We can also target even and odd children using odd and even modifiers.

<table>
<!-- ... -->
<tbody>
  {#each people as person}
    <!-- Use a white background for odd rows, and slate-50 for even rows -->
    <tr class="odd:bg-white even:bg-slate-50">
      <td>{person.name}</td>
      <td>{person.title}</td>
      <td>{person.email}</td>
    </tr>
  {/each}
</tbody>
</table>

Responsive Design

Tailwind CSS is a mobile-first CSS framework. It offers different breakdown points to make it responsive.

For that purpose, tailwind uses modifiers like :sm, :md, :lg, :xl

  <!-- This will center  text on mobile, and left align it on sm screens and wider -->
  <div class="text-center sm:text-left"></div>

We can also override these responsive breakdowns as per our own requirements.

tailwind.config = {
      theme: {
        screens: {
          sm: "480px",
          md: "768px",
          lg: "976px",
          xl: "1440px",
        },
      },
    };

Kumar Shubham