/* v4 Configuration */
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/base' layer(base);
@import 'tailwindcss/components' layer(components);
@import 'tailwindcss/utilities' layer(utilities);

// tailwind.config.js v4
export default {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: 'oklch(0.7 0.15 200)',
      },
    },
  },
}

<div class="@container">
  <div class="@sm:text-lg @md:text-xl">Container-based responsive!</div>
</div>

<div class="bg-red-500/20 text-blue-600/80">Native opacity support</div>