Building Responsive Web Applications with Tailwind CSS

Tailwind CSS changed how I write CSS, and I'm not going back. Instead of writing custom CSS files, you just add classes directly to your HTML. It felt weird at first, but now I can build stuff way faster. Let me show you what I've learned.

Why Tailwind is Different

Unlike Bootstrap or Material-UI that give you pre-made buttons and cards, Tailwind gives you small utility classes to build whatever you want. Here's why I love it:

• No more naming things: Seriously, naming CSS classes was the hardest part
• Everything looks consistent: The spacing and colors just work together
• Small file sizes: Only the CSS you use gets included in your final build
• Easy to customize: Change colors and spacing to match your brand
• Great autocomplete: Your editor will suggest classes as you type
  
  

Getting Started

Installing Tailwind

If you're using Next.js, setting up Tailwind is pretty simple:

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

Setting It Up

Update your tailwind.config.js to tell Tailwind where your files are:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... more shades
          900: '#0c4a6e',
        },
      },
    },
  },
  plugins: [],
}

How It Works

1. Using Utility Classes

Instead of writing CSS in a separate file, you add classes directly to your HTML:

// Traditional CSS approach
<div className="card">
  <h2 className="card-title">Title</h2>
  <p className="card-text">Content</p>
</div>

// Tailwind CSS approach
<div className="bg-white rounded-lg shadow-lg p-6">
  <h2 className="text-2xl font-bold mb-4">Title</h2>
  <p className="text-gray-600">Content</p>
</div>

2. Making It Responsive

Tailwind makes responsive design really easy. Just add prefixes like md: or lg::

<div className="
  w-full          // Full width on mobile
  md:w-1/2        // Half width on tablets
  lg:w-1/3        // One-third width on desktop
  xl:w-1/4        // Quarter width on large screens
">
  Responsive content
</div>

3. Hover and Focus States

Add hover and focus effects by just adding prefixes:

<button className="
  bg-blue-500 
  hover:bg-blue-600 
  focus:ring-4 
  focus:ring-blue-300 
  active:bg-blue-700
  transition-all duration-200
">
  Click me
</button>

Let's Build a Navigation Bar

Here's a real example - a navigation bar that works on mobile and desktop:

export default function Navigation() {
  return (
    <nav className="bg-white dark:bg-gray-900 shadow-lg">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16">
          {/* Logo */}
          <div className="flex items-center">
            <span className="text-2xl font-bold text-gray-900 dark:text-white">
              Logo
            </span>
          </div>
          
          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-8">
            <a href="#" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
              Home
            </a>
            <a href="#" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
              About
            </a>
            <a href="#" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors">
              Contact
            </a>
          </div>
          
          {/* Mobile menu button */}
          <div className="md:hidden flex items-center">
            <button className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </nav>
  )
}

Adding Dark Mode

Dark mode is super easy with Tailwind:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media' for system preference
  // ... rest of config
}

// Component
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 className="text-3xl font-bold">
    This text adapts to dark mode
  </h1>
</div>

Some Cool Tricks

1. Reusing Styles with @apply

If you're using the same set of classes over and over, you can create a custom class:

@layer components {
  .btn-primary {
    @apply px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
  }
  
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6;
  }
}

2. Custom Values

Need an exact size that's not in Tailwind? Just use square brackets:

<div className="w-[347px] h-[137px] top-[100px]">
  Precise dimensions
</div>

3. Hover Parent, Change Child

Want a child element to change when you hover its parent? Use group:

<div className="group hover:bg-blue-500">
  <p className="text-gray-900 group-hover:text-white">
    Text changes when parent is hovered
  </p>
</div>

Making It Fast

1. Removing Unused CSS

Tailwind automatically removes any CSS classes you're not using:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // This ensures only used classes are included
}

2. JIT Mode

Tailwind compiles your styles as you write them, which means:

• Super fast builds
• Smaller files
• You can use any custom value you want
  
  

Useful Patterns

How to Center Things

// Horizontal and vertical center
<div className="flex items-center justify-center min-h-screen">
  Centered content
</div>

// Center with grid
<div className="grid place-items-center min-h-screen">
  Centered content
</div>

Building a Card

<div className="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div className="md:flex">
    <div className="md:flex-shrink-0">
      <img className="h-48 w-full object-cover md:w-48" src="/img/card.jpg" alt="Card" />
    </div>
    <div className="p-8">
      <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
        Category
      </div>
      <h2 className="block mt-1 text-lg leading-tight font-medium text-black">
        Card Title
      </h2>
      <p className="mt-2 text-gray-500">
        Card description text goes here.
      </p>
    </div>
  </div>
</div>

Tips From My Experience

1. Use @layer for custom styles: Keeps your CSS organized
2. Stick to the design system: Use the default spacing and colors - they look good together
3. Start with mobile: Design for phones first, then add tablet and desktop styles
4. Make reusable components: If you're copying the same classes everywhere, make it a component
5. Try plugins: There are plugins for forms, typography, and more
6. Set up autocomplete: Makes writing Tailwind classes so much easier
   
   

Final Thoughts

Tailwind CSS completely changed how I write CSS. Yeah, it looks weird at first with all those classes in your HTML, but once you get used to it, you'll be way more productive.

What I love about it:

• I can build stuff way faster now
• Everything looks consistent
• My CSS files are tiny
• The autocomplete is amazing
• Super easy to customize
  
  

If you haven't tried it yet, just build one small thing with it. You might hate it at first (I did), but give it a few hours. It clicks eventually, and then you'll wonder how you ever lived without it.

Resources:

• Official Tailwind CSS Documentation
• Tailwind UI Components
• Headless UI for React
  
  

---

Rolando (Jun) Remolacio