Tailwind CSS Practical Tips

Tailwind CSS is a utility-first CSS framework that provides a large set of atomic classes, allowing you to build styles directly in HTML.

Why Choose Tailwind

• High Development Efficiency — No need to switch between HTML and CSS
• Consistency — Unified naming conventions prevent style chaos
• Maintainability — Delete unused classes to clean up styles
• Responsive — Built-in responsive utility classes

Practical Tips

1. Conditional Styles

<div :class="[isActive ? 'bg-blue-500' : 'bg-gray-200']">
  Status Indicator
</div>

2. Responsive Design

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

3. Dark Mode

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  Content with dark mode support
</div>

4. Custom Configuration

Extend the theme in tailwind.config.js:

export default {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#8b5cf6'
      }
    }
  }
}

5. Utility Class Composition

<button class="
  px-4 py-2 rounded-lg font-medium
  bg-blue-500 hover:bg-blue-600
  text-white transition-colors duration-200
  focus:outline-none focus:ring-2 focus:ring-blue-300
">
  Click Me
</button>

Best Practices

1. Use @apply to extract repeated styles
2. Use group and peer for interactive effects
3. Use @layer to organize custom styles
4. Enable JIT mode for faster builds

Hope these tips help you!