Tailwind CSS is a utility-first CSS framework that lets you build custom designs without leaving your HTML.

Installation

npm install -D tailwindcss
npx tailwindcss init

Configure your template paths:

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,astro}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Basic Usage

<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">
  <h1 class="text-2xl font-bold mb-2">Hello Tailwind</h1>
  <p class="text-sm">Utility-first CSS is awesome!</p>
</div>

Responsive Design

<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full width on mobile, half on tablet, third on desktop -->
</div>

Custom Colors

// tailwind.config.js
theme: {
  extend: {
    colors: {
      brand: {
        50: '#f0f9ff',
        500: '#0ea5e9',
        900: '#0c4a6e',
      }
    }
  }
}

Components with @apply

.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;
}

Dark Mode

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  Content adapts to dark mode
</div>

Enable in config:

module.exports = {
  darkMode: 'class', // or 'media'
  // ...
}

Common Patterns

Card Component

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img.jpg" alt="Card">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Card Title</div>
    <p class="text-gray-700 text-base">Card content here.</p>
  </div>
</div>

Flexbox Layout

<div class="flex items-center justify-between">
  <div>Left content</div>
  <div>Right content</div>
</div>

Grid Layout

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Best Practices

  1. Use @apply sparingly for repeated patterns
  2. Leverage responsive modifiers (sm:, md:, lg:)
  3. Use arbitrary values when needed: w-[137px]
  4. Keep utility classes organized
  5. Use plugins for additional utilities

Plugins

Popular Tailwind plugins:

npm install @tailwindcss/forms @tailwindcss/typography
plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
]

Conclusion

Tailwind CSS speeds up development while maintaining design flexibility. Practice these patterns and explore the official documentation for more utilities.