Building with TailwindCSS

TailwindCSS has revolutionized the way developers write CSS. Its utility-first approach allows for rapid prototyping and consistent designs.

What is Utility-First CSS?

Instead of writing custom CSS classes, utility-first CSS provides small, single-purpose classes that you compose to build your UI.

<!-- Traditional CSS approach -->
<div class="card">
  <h2 class="card-title">Hello World</h2>
</div>

<!-- Utility-first approach -->
<div class="bg-white rounded-lg shadow-md p-6">
  <h2 class="text-xl font-bold text-gray-900">Hello World</h2>
</div>

Getting Started

Install TailwindCSS in your project:

npm install tailwindcss
npx tailwindcss init

Configure your template paths in tailwind.config.js:

export default {
  content: ['./src/**/*.{html,js,njk}'],
  theme: {
    extend: {}
  },
  plugins: []
};

Core Concepts

Responsive Design

Tailwind makes responsive design intuitive with breakpoint prefixes:

<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

Breakpoint	Min Width	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

State Variants

Apply styles on hover, focus, and other states:

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2">
  Click me
</button>

Dark Mode

Tailwind supports dark mode out of the box:

<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-900 dark:text-white">
    Adapts to color scheme
  </p>
</div>

Building Components

Button Component

Here is how to build a reusable button:

<button class="
  inline-flex items-center justify-center
  px-4 py-2
  text-sm font-medium
  text-white bg-primary-600
  rounded-lg
  hover:bg-primary-700
  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500
  transition-colors duration-200
">
  Button Text
</button>

Card Component

A flexible card component:

<article class="
  bg-white rounded-xl shadow-sm
  border border-gray-100
  overflow-hidden
  hover:shadow-lg transition-shadow
">
  <img src="image.jpg" class="w-full aspect-video object-cover">
  <div class="p-6">
    <h3 class="text-xl font-semibold mb-2">Card Title</h3>
    <p class="text-gray-600">Card description goes here.</p>
  </div>
</article>

Advanced Features

Custom Configuration

Extend the default theme with your own values:

export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0fdf4',
          500: '#22c55e',
          600: '#16a34a',
          700: '#15803d'
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif']
      }
    }
  }
};

Using Plugins

Add functionality with official plugins:

export default {
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms')
  ]
};

The typography plugin provides beautiful prose styling:

Feature	Class
Prose container	prose
Large prose	prose-lg
Dark mode	prose-invert
Custom colors	prose-primary

Performance Optimization

Tailwind automatically removes unused CSS in production:

// In production, only used classes are included
// Typical CSS size: 10-20KB gzipped

Best Practices

1. Use the JIT compiler for development
2. Configure content paths correctly
3. Avoid dynamic class names
4. Use @apply sparingly

Conclusion

TailwindCSS provides a powerful, flexible approach to styling. Its utility-first methodology, combined with excellent documentation and tooling, makes it an excellent choice for modern web development.

For more information, visit the official Tailwind documentation.