Modern CSS with Tailwind - Utility-First Patterns

<!-- Mobile-first approach -->
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">Responsive width</div>

<!-- Container queries -->
<div class="@container">
  <div class="@sm:grid-cols-2 @md:grid-cols-3 grid">
    Grid adapts to container size, not viewport!
  </div>
</div>

<!-- Arbitrary values -->
<div class="w-[calc(100%-2rem)] lg:w-[600px]">Custom widths</div>

<!-- System preference -->
<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">Automatic dark mode</p>
</div>

<!-- Manual toggle -->
<html class="dark">
  <body class="bg-white dark:bg-gray-900">
    <!-- Content -->
  </body>
</html>

// Toggle dark mode
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        128: '32rem',
        144: '36rem',
      },
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... full palette
          900: '#0c4a6e',
        },
      },
      fontSize: {
        '2xs': '0.625rem',
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
          '&::-webkit-scrollbar': {
            display: 'none',
          },
        },
      });
    },
  ],
};

<!-- Card component pattern -->
<div
  class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800"
>
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
    Card Title
  </h3>
  <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Card content</p>
</div>

<!-- Button variants -->
<button
  class="inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50"
>
  Primary Button
</button>

<button
  class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-900 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
>
  Secondary Button
</button>

<!-- Hover, focus, active states -->
<button
  class="bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:bg-blue-700"
>
  Interactive Button
</button>

<!-- Disabled state -->
<button
  class="bg-blue-500 disabled:cursor-not-allowed disabled:bg-gray-300"
  disabled
>
  Disabled
</button>

<!-- Group hover -->
<div class="group">
  <img class="transition group-hover:scale-110" src="..." />
  <p class="group-hover:text-blue-600">Hover the parent</p>
</div>

<!-- Peer state -->
<input type="checkbox" class="peer" id="terms" />
<label class="peer-checked:text-blue-600" for="terms"> I agree to terms </label>

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <div class="flex-1">Flexible</div>
  <div class="flex-shrink-0">Fixed</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div>Item 1</div>
  <div class="md:col-span-2">Spanning item</div>
</div>

<!-- Positioning -->
<div class="relative h-64">
  <div class="absolute inset-0 flex items-center justify-center">Centered</div>
  <div class="absolute right-4 top-4">Top right corner</div>
</div>

<article
  class="prose prose-lg dark:prose-invert prose-headings:font-bold prose-a:text-blue-600 max-w-none"
>
  <h1>Article Title</h1>
  <p>Article content with automatic styling...</p>
</article>