CSS-First Configuration
module.exports = {
theme: {
fontFamily: {
display: ['Satoshi', 'sans-serif'],
},
extend: {
colors: {
'custom-blue': '#1234567'
}
}
}
}
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--color-custom-blue: #123456;
}
Key points:
Dynamic Utility Values
<div class="grid grid-cols-[15]">
<div data-custom class="[&[data-custom]]:opacity-100">
<div class="grid grid-cols-15">
<div data-custom class="data-custom:opacity-100">
<div class="mt-8">
<div class="w-17"></div>
</div>
</div>
</div>
</div>
</div>
Key points:
Numbers work directly without arbitrary values
Data attributes work without configuration
Spacing scale is dynamic and flexible
Container Queries
<div class="@container">
<div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
</div>
<div class="grid grid-cols-3 @max-md:grid-cols-1">
</div>
<div class="flex @min-md:@max-xl:hidden">
</div>
</div>
Key points:
Built-in container queries (no plugin needed)
Supports min/max width combinations
Uses familiar breakpoint syntax
<div class="perspective-distant">
<div class="group">
<div
class="transform-3d rotate-x-12 rotate-y-6 group-hover:rotate-y-180 transition-transform duration-500"
>
</div>
</div>
</div>
Key points:
Built-in 3D transform utilities
Works with hover/group states
Great for card flips and 3D effects
Enhanced Gradients
<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500">
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400">
<div class="bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%">
<div class="bg-conic from-red-600 to-red-600"></div>
</div>
</div>
</div>
Key points:
New angle-based gradients
Control over color interpolation
Support for radial/conic gradients
Not Variant
<button class="opacity-75 not-hover:opacity-100">Button</button>
<div class="not-supports-[display:grid]:flex">Fallback flex container</div>
<button class="bg-blue-500 hover:not-focus:bg-blue-600">
Interactive button
</button>
Key points:
Negates any variant condition
Works with feature queries
Can be combined with other variants
Box Shadows and Rings
<div class="shadow-md inset-shadow-sm inset-shadow-indigo-500/20">
</div>
<button
class="ring-2 ring-blue-500 inset-ring-1 inset-ring-blue-200/50 hover:ring-blue-600"
>
Fancy Button
</button>
<input class="inset-shadow-xs inset-shadow-gray-950/5 focus:inset-shadow-sm" />
This is great for adding depth and dimension without needing custom CSS.
<input
type="text"
class="field-sizing-content min-w-40 max-w-96"
placeholder="I grow as you type..."
/>
<textarea class="field-sizing-content min-h-20" rows="2"></textarea>
Great for forms where you want dynamic sizing without JS.
Font Stretch (Variable fonts)
<nav class="font-stretch-condensed">
</nav>
<h1 class="font-stretch-normal hover:font-stretch-expanded transition-all">
Interactive Heading
</h1>
First/Last/Nth utilities
<ul>
<li class="py-4 first:pt-0 last:pb-0">Item</li>
<li class="odd:bg-gray-50 even:bg-white">Item</li>
<li class="nth-3:text-blue-500">Third item special</li>
</ul>
The "in" variant (Implicit groups)
<div class="group">
<span class="group-hover:underline">Needs group class</span>
</div>
<div>
<span class="in-hover:underline">Works automatically!</span>
</div>
<article>
<h2 class="in-hover:text-blue-500">
<span class="in-hover:underline"> Both respond to article hover </span>
</h2>
</article>
