Modern CSS with Tailwind — Stop Writing CSS, Start Shipping

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

// tailwind.config.js
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        brand: { 50: '#eff6ff', 500: '#3858f6', 900: '#1e3a8a' },
      },
    },
  },
}

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- 1 col on mobile, 2 on md, 3 on lg -->
</div>

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white">
  <h1 class="text-2xl font-bold">Hello World</h1>
</div>

<button class="bg-brand-500 text-white px-4 py-2 rounded-lg
               hover:bg-brand-700 focus:outline-none focus:ring-2
               focus:ring-brand-500 transition-colors duration-200">
  Click Me
</button>

function Card({ title, description, image }: CardProps) {
  return (
    <div className="rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-shadow bg-white dark:bg-gray-800">
      <img src={image} alt={title} className="w-full h-48 object-cover" />
      <div className="p-6">
        <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
          {title}
        </h3>
        <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
          {description}
        </p>
      </div>
    </div>
  )
}

/* globals.css */
@layer components {
  .btn-primary {
    @apply bg-brand-500 text-white px-6 py-3 rounded-xl font-semibold
           hover:bg-brand-700 transition-colors duration-200;
  }
 
  .prose-blog {
    @apply prose prose-lg max-w-none
           prose-headings:font-bold prose-code:text-brand-600;
  }
}