Mastering Tailwind CSS

Tailwind CSS has revolutionized how developers approach styling. Instead of writing custom CSS, you compose designs using utility classes directly in your HTML.

Why Developers Love Tailwind

• Rapid Development: Build UIs faster without context-switching
• Consistency: Design tokens ensure visual consistency
• Flexibility: Customize everything without fighting the framework
• Performance: PurgeCSS removes unused styles automatically

Getting Started

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your tailwind.config.js:

module.exports = {
  content: [
    './templates/**/*.html',
    './static/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#667eea',
        secondary: '#764ba2',
      },
    },
  },
  plugins: [],
}

Essential Utility Classes

Layout

<div class="container mx-auto px-4">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full md:w-1/2 lg:w-1/3 px-4">
      <!-- Content -->
    </div>
  </div>
</div>

Typography

<h1 class="text-4xl font-bold text-gray-900">Heading</h1>
<p class="text-lg text-gray-600 leading-relaxed">
  Paragraph text with relaxed line height.
</p>

Spacing

<div class="p-6 m-4 space-y-4">
  <div class="mb-4">Margin bottom</div>
  <div class="mt-8">Margin top</div>
</div>

Responsive Design

Tailwind uses mobile-first breakpoints:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

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

Component Patterns

Card Component

<div class="bg-white rounded-lg shadow-lg overflow-hidden">
  <img class="w-full h-48 object-cover" src="..." alt="...">
  <div class="p-6">
    <h3 class="text-xl font-bold mb-2">Card Title</h3>
    <p class="text-gray-600">Card description goes here.</p>
    <button class="mt-4 bg-primary text-white px-4 py-2 rounded-lg
                   hover:bg-opacity-90 transition-colors">
      Learn More
    </button>
  </div>
</div>

Button Variants

<!-- Primary -->
<button class="bg-blue-600 text-white px-6 py-2 rounded-lg
               hover:bg-blue-700 transition-colors">
  Primary
</button>

<!-- Outline -->
<button class="border-2 border-blue-600 text-blue-600 px-6 py-2 rounded-lg
               hover:bg-blue-600 hover:text-white transition-colors">
  Outline
</button>

Dark Mode

Enable dark mode in your config:

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

Use dark mode variants:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <!-- Adapts to dark mode -->
</div>

Optimization

Remove unused CSS in production:

NODE_ENV=production npx tailwindcss -o build.css --minify

Pro Tips

1. Use @apply sparingly: Keep utilities in HTML when possible
2. Create design tokens: Define colors, spacing, etc. in config
3. Use plugins: Extend with forms, typography, and more
4. Component extraction: For repeated patterns, create components

Resources

• Official Documentation
• Tailwind UI - Premium components
• Headless UI - Accessible components

Browse our Tailwind templates in the marketplace for inspiration!