Building Responsive UIs with Tailwind CSS

Tailwind CSS revolutionizes how we build user interfaces with its utility-first approach. This tutorial walks you through creating responsive, accessible designs using Tailwind's powerful utility classes.

Getting Started

Install Tailwind CSS in your project:

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

Configure your tailwind.config.js to include your template paths, then add Tailwind directives to your CSS file.

Responsive Design

Tailwind uses mobile-first breakpoints: - sm: - 640px and up - md: - 768px and up - lg: - 1024px and up - xl: - 1280px and up - 2xl: - 1536px and up

Example:

<div class="text-sm md:text-base lg:text-lg">
  Responsive text
</div>

Layout Utilities

Use Flexbox and Grid with Tailwind:

<div class="flex flex-col md:flex-row gap-4">
  <div class="flex-1">Column 1</div>
  <div class="flex-1">Column 2</div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Grid items -->
</div>

Customization

Extend Tailwind in your config:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6',
      },
      spacing: {
        '128': '32rem',
      },
    },
  },
}

Dark Mode

Enable dark mode in your config and use the dark: variant:

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

Component Extraction

For repeated patterns, use @apply:

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

Master the art of rapid UI development while maintaining clean, maintainable code.