theme, @apply & Arbitrary Values in Tailwind CSS
From the Tailwind CSS cheat sheet · Customization · verified Jul 2026
@theme, @apply & Arbitrary Values
Extend the default theme, use utilities in custom CSS, and write one-off values.
css
/* @theme — customize colors, fonts, spacing (v4) */
@theme {
--color-brand: #3b82f6;
--font-display: "Inter", sans-serif;
}
/* @apply — use Tailwind utilities in custom CSS */
.btn-primary {
@apply bg-blue-500 text-white px-4 py-2 rounded-lg;
}
/* Arbitrary values — one-off custom values */
<div class="w-[347px] bg-[#1a2b3c] top-[117px]">💡 @theme replaces tailwind.config.js in v4 — everything is CSS-native now
⚡ Use @apply sparingly — it's best for repeated component patterns, not one-off styles
📌 @variant lets you use dark:, hover:, etc. inside custom CSS blocks
🟢 Arbitrary values [347px] are escape hatches for one-off values not in the scale
themeapplycustomizationarbitrary
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.