Tailwind CSS is a utility-first CSS framework designed to allow developers to build custom designs quickly. Instead of writing custom styles, Tailwind provides a collection of utility classes that you can use to style elements directly in the HTML.

1. Installation and Setup

How to install Tailwind using CDN

For quick prototyping, you can include Tailwind directly in your project with a CDN. Add the following to your HTML <head> tag:

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

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

2. Key Concepts in Tailwind CSS

Utility-First Approach

Tailwind uses small utility classes like text-center, bg-blue-500, and mt-4 to control elements’ design directly in the HTML. This eliminates the need for writing custom CSS.

Responsive Design

Tailwind provides responsive utilities that help you design mobile-first and scale up for larger screens. You can add breakpoints to utilities using sm:, md:, lg:, xl:, etc.

3. Core Concepts

Colors

Tailwind provides a set of predefined colors. You can apply them using classes like bg-blue-500 or text-red-600. Example:

<div class="bg-blue-500 text-white p-4">
  This is a blue background with white text.
</div>

Spacing (Padding and Margin)

Tailwind has utilities for margin (m-*) and padding (p-*), where * is a scale value. Example:

<div class="m-4 p-6">
  This element has 1rem margin and 1.5rem padding.
</div>

Typography

Tailwind provides utilities for font size (text-*), font weight (font-*), text color (text-*), and line height (leading-*). Example:

<p class="text-lg font-semibold leading-relaxed">
  This is a large, semi-bold text with relaxed line height.
</p>

4. Layout Utilities

Flexbox and Grid

Tailwind CSS makes it easy to use Flexbox and CSS Grid with utilities like flex, grid, flex-col, justify-center, etc. Example of Flexbox:

<div class="flex justify-center items-center h-screen">
  <div class="bg-gray-200 p-6">Center me!</div>
</div>

Example of Grid:

<div class="grid grid-cols-3 gap-4">
  <div class="bg-red-500">Item 1</div>
  <div class="bg-blue-500">Item 2</div>
  <div class="bg-green-500">Item 3</div>
</div>

Container

The .container class centers your content and applies responsive width.

<div class="container mx-auto p-4">
  Content here will be centered.
</div>

5. Customization

You can customize Tailwind’s default theme using the tailwind.config.js file. For example, you can change the color palette, font sizes, spacing, etc.

module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#123456',
      },
    },
  },
}

7. Tailwind Directives

  • @tailwind base;: Applies the base styles like resets.
  • @tailwind components;: Injects component-level styles.
  • @tailwind utilities;: Includes utility classes like padding, margin, colors, etc.
  • @apply: Use this directive to group utilities into a single class (useful for custom components).
.btn {
  @apply bg-blue-500 text-white p-2 rounded;
}

8. Handling States with Pseudo-Classes

Tailwind provides utilities for pseudo-classes such as hover:, focus:, active:, etc. Example:

<button class="bg-blue-500 hover:bg-blue-700 text-white p-2">
  Hover me!
</button>

9. Transitions and Animations

You can add smooth transitions and animations using Tailwind’s utility classes. Example:

<div class="transition ease-in-out duration-500 transform hover:scale-110">
  Hover to scale up!
</div>

10. Plugins

Tailwind allows you to extend its functionality with plugins, such as for forms, typography, or aspect ratio utilities. Example of installing a plugin:

npm install @tailwindcss/forms

Then, add it to your tailwind.config.js:

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

11. Tailwind CSS with JIT Mode

Just-in-time (JIT) mode generates only the classes you use, reducing file size and speeding up development. To enable JIT:

module.exports = {
  mode: 'jit',
  content: ['./**/*.html'],
}

12. Example Project

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Example</title>
  <link href="https://cdn.tailwindcss.com" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-900">
  <header class="bg-blue-500 text-white p-4">
    <h1 class="text-xl font-bold">My Tailwind Page</h1>
  </header>
  
  <main class="p-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <div class="bg-white p-4 rounded shadow-md">Card 1</div>
      <div class="bg-white p-4 rounded shadow-md">Card 2</div>
      <div class="bg-white p-4 rounded shadow-md">Card 3</div>
    </div>
  </main>

  <footer class="bg-gray-800 text-white p-4 text-center">
    <p>&copy; 2025 My Tailwind Site</p>
  </footer>
</body>
</html>