What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

The beauty of this thing called tailwind is it doesn’t impose design specifications or how your site should look, you simply bring tiny components together to construct a unique user interface. What Tailwind simply does is take a ‘raw’ CSS file, process this CSS file over a configuration file, and produces an output.

Why Tailwind CSS?

Faster UI building process.
It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in the traditional approach.

Advantages of Tailwind CSS

No more silly names for CSS classes and Id.
Minimum lines of Code in CSS file.
We can customize the designs to make the components.
Makes the website responsive.
Makes the changes in the desired manner.

---

Get Started with Tailwind CSS

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles, and then writing them to a static CSS file.

Inastallation

Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only and is not the best choice for production.

Add the Play CDN script to your HTML

Add the Play CDN script tag to the of your HTML file, and start using Tailwind’s utility classes to style your content.

<script src="https://cdn.tailwindcss.com"></script>

Try customizing your config

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

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

Try adding some custom CSS

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

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
    }
  </style>
</head>
<body>
  <div class="lg:content-auto">
    <!-- ... -->
  </div>
</body>
</html>

Try using the first-party plugin

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

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
</head>
<body>
  <div class="prose">
    <!-- ... -->
  </div>
</body>
</html>

Utility-First Fundamentals

Building complex components from a constrained set of primitive utilities.

Traditionally, whenever you need to style something on the web, you write CSS.

Using a traditional approach where custom designs require custom CSS

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

With Tailwind, you style elements by applying pre-existing classes directly in your HTML.

Using utility classes to build custom designs without writing CSS

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

In the example above, we’ve used:

Handling Hover, Focus, Active, and more.

Using utilities to style elements on hover, Focus, active, and more.

hover (:hover)

Style an element when the user hovers over it with the mouse cursor using the hover modifier:

<div class="bg-black hover:bg-white ...">
  <!-- ... -->
</div>

focus (:focus)

Style an element when it has to focus the focus modifier:

<input class="border-gray-300 focus:border-blue-400 ..." />

active (:active)

Style an element when it is being pressed using the active modifier:

<button class="bg-blue-500 active:bg-blue-600 ...">
  Active
</button>

visited (:visited)

Style a link when it has already been visited using the visited modifier:

<a href="https://seinfeldquotes.com" class="text-blue-600 visited:text-purple-600 ...">
  Visited
</a>

target (:target)

Style an element if its ID matches the current URL fragment using the target modifier:

<div id="about" class="target:shadow-lg ...">
  <!-- ... -->
</div>

checked (:checked)

Style a checkbox or radio button when it’s checked using the checked modifier:

<input type="checkbox" class="appearance-none checked:bg-blue-500 ..." />

required (:required)

Style an input when it’s required using the required modifier:

<input class="required:border-red-500 ..." />

placeholder-shown (:placeholder-shown)

Style an input when the placeholder is shown using the placeholder-shown modifier:

<input class="placeholder-shown:border-gray-500 ..." placeholder="you@example.com" />

autofill (:autofill)

Style an input when it has been auto-filled by the browser using the autofill modifier:

<input class="autofill:bg-yellow-200 ..." />

Responsive Design

Using responsive utility variants to build adaptive user interfaces.

There are five breakpoints by default, inspired by common device resolutions:

Breakpoint prefix	Minimum width	CSS
`sm`	640px	`@media (min-width: 640px) { ... }`
`md`	768px	`@media (min-width: 768px) { ... }`
`lg`	1024px	`@media (min-width: 1024px) { ... }`
`xl`	1280px	`@media (min-width: 1280px) { ... }`
`2xl`	1536px	`@media (min-width: 1536px) { ... }`

To add a utility but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the : character:

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

This works for every utility class in the framework, which means you can change anything at a given breakpoint — even things like letter spacing or cursor styles.

Mobile First

By default, Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.

Targeting mobile screens

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don't think of sm: as meaning "on small screens", think of it as "at the small breakpoint".

Don't use sm: to target mobile devices

<!-- This will only center the text on screens 640px and wider, not on small screens -->
<div class="sm:text-center"></div>

Use unprefixed utilities to target mobile, and override them at larger breakpoints
```

<div class="text-center sm:text-left"></div>
```
For this reason, it’s often a good idea to implement the mobile layout for a design first, then layer on any changes that make sense for sm screens, followed by md screens, etc.

Flex

Utilities for controlling how flex items both grow and shrink.

Class	Properties
`flex-1`	`flex: 1 1 0%;`
`flex-auto`	`flex: 1 1 auto;`
`flex-initial`	`flex: 0 1 auto;`
`flex-none`	`flex: none;`

Initial

Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:

<div class="flex">
  <div class="flex-none w-14 h-14">
    01
  </div>
  <div class="flex-initial w-64 ...">
    02
  </div>
  <div class="flex-initial w-32 ...">
    03
  </div>
</div>

Flex 1

Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:

<div class="flex">
  <div class="flex-none ...">
    01
  </div>
  <div class="flex-1 w-64 ...">
    02
  </div>
  <div class="flex-1 w-32 ...">
    03
  </div>
</div>

Auto

Use flex-auto to allow a flex item to grow and shrink, taking into account its initial size:

<div class="flex ...">
  <div class="flex-none ...">
    01
  </div>
  <div class="flex-auto w-64 ...">
    02
  </div>
  <div class="flex-auto w-32 ...">
    03
  </div>
</div>

None

Use flex-none to prevent a flex item from growing or shrinking:

<div class="flex ...">
  <div class="flex-none w-14 h-14 ...">
    01
  </div>
  <div class="flex-none ...">
    02
  </div>
  <div class="flex-1 ...">
    03
  </div>
</div>

Reference

Tailwind CSS

And that’s pretty much it. 🙂

I hope this reference guide has been helpful for you!

Thanks to:- Hitesh Chaudhary

alt text

Vandit Bera's Blog