what is Tailwind CSS?🤔

Tailwind CSS is a utility-first CSS framework for rapidly building custom UIs. It is highly focused on a mobile-first approach like Bootstrap. It's a customizable and low-level CSS framework that provides all the building blocks to create designs without any styles.

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.

Tailwind CSS is a low-level framework, Meaning unlike other CSS frameworks like Bootstrap and Materialize, Tailwind doesn’t offer fully styled components like buttons, dropdowns, and navbars. Instead, it offers utility classes so you can create your reusable components.

For that reason, it provides a lot more flexibility and control over what your application looks like than other CSS frameworks. This can enable you to create a more unique site.

👉 Advantages

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.

👉 Getting Started

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. It's fast, flexible, and reliable — with zero runtime.

👉 add tailwind using Play CDN

Add the play CDN script tag to the head of your HTML file.
```
<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.

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

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

<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 this example, we have used

Tailwind’s flexbox and padding utilities (flex, shrink-0, and p-6) to control the overall card layout

The max-width and margin utilities (max-w-sm and mx-auto) to constrain the card width and center it horizontally

The background color, border-radius, and box-shadow utilities (bg-white, rounded-xl, and shadow-lg) to style the card’s appearance

The width and height utilities (w-12 and h-12) to size the logo image

The space-between utilities (space-x-4) to handle the spacing between the logo and the text

The font size, text color, and font-weight utilities (text-xl, text-black, font-medium, etc.) to style the card text

with help of this approach, we can implement a completely custom component design without writing a single line of custom CSS.

👉 Handling Hover, Focus, and other States

Tailwind includes modifiers for just about everything you’ll ever need, including:

Pseudo-classes, like :hover, :focus, :first-child, and :required
Pseudo-elements, like ::before, ::after, ::placeholder, and ::selection
Media queries, like responsive breakpoints, dark mode, and prefers-reduced-motion
Attribute selectors, like [dir="rtl"] and [open]

hover, focus, active

<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Save changes
</button>

before and after

before

<blockquote class="text-2xl font-semibold italic text-center text-slate-900">
  When you look
  <span class="before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block">
    <span class="relative text-white">annoyed</span>
  </span>
  all the time, people think that you're busy.
</blockquote>

after

<label class="block">
  <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
    Email
  </span>
  <input type="email" name="email" class="mt-1 px-3 py-2 bg-white border shadow-sm border-slate-300 placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
</label>

👉 Responsive Design

sm

minimum width 640px CSS @media (min-width: 640px) { ... }

md

minimum width 768px CSS @media (min-width: 768px) { ... }

lg

minimum width 1024px CSS @media (min-width: 1024px) { ... }

xl

minimum width 1280px CSS @media (min-width: 1280px) { ... }

2xl

minimum width 1536px CSS @media (min-width: 1536px) { ... }

👉 Mobile First

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

<div class="text-center sm:text-left"></div>

👉 Targeting a single breakpoint

<div class="bg-green-500 md:bg-red-500 lg:bg-green-500">
  <!-- ... -->
</div>

👉 Customizing breakpoints

You can completely customize your breakpoints in your tailwind.config.js file:

 module.exports = {
   theme: {
     screens: {
       'tablet': '640px',
       // => @media (min-width: 640px) { ... }
       'laptop': '1024px',
       // => @media (min-width: 1024px) { ... }
       'desktop': '1280px',
       // => @media (min-width: 1280px) { ... }
     },
    }
  }

👉 Resources

Tailwind Doc

GFG

blog

Getting started with Tailwind CSS

A beginners guide

Table of contents