Responsive design and dark mode without the headache

Tailwind handles responsiveness and dark mode through variant prefixes — small prefixes you add to any utility class.

Responsive prefixes

Tailwind is mobile-first. Unprefixed classes apply to all screen sizes. Prefixed classes apply at that breakpoint and above.

Prefix	Min-width	Typical use
`sm:`	640px	Tablets
`md:`	768px	Small laptops
`lg:`	1024px	Desktops
`xl:`	1280px	Wide screens

<!-- Single column on mobile, 3 columns on desktop -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

<!-- Text size adapts to screen size -->
<h1 class="text-3xl sm:text-5xl lg:text-7xl font-bold">

Dark mode

Add dark: before any utility to apply it in dark mode:

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">

Enable dark mode in your tailwind.config.js:

module.exports = {
  darkMode: 'class', // toggled by adding 'dark' class to <html>
}

Then toggle with JavaScript:

document.documentElement.classList.toggle('dark')

Hover, focus, and other states

<!-- Hover -->
<button class="bg-blue-500 hover:bg-blue-600">

<!-- Focus ring for accessibility -->
<input class="focus:outline-none focus:ring-2 focus:ring-blue-500">

<!-- Active state -->
<button class="active:scale-95 transition-transform">

Putting it all together

<nav class="flex items-center justify-between px-6 py-4 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
  <span class="text-xl font-bold text-gray-900 dark:text-white">Logo</span>
  <div class="hidden sm:flex items-center gap-4">
    <a href="#" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
      Link
    </a>
  </div>
</nav>

Congratulations! You've covered the core of Tailwind CSS. The rest is practice. Build something real with it — the utility classes will become muscle memory fast. Want to go further? Our paid courses use Tailwind with Shadcn/ui to build production-quality UIs.