Smithery is now a part of Arcade.dev! Read more in our announcement here
Tailwind CSS v4.1 core features, @theme, directives, migration guide
Not the day-to-day CSS-first configuration reference (tailwindcss-core owns @theme/@utility/@variant usage) and not a utility-class lookup (the category skills own that).
| Namespace | Generated Utilities |
|---|---|
--color-* |
bg-, text-, border-, fill- |
--font-* |
font-* |
--text-* |
text-xs, text-sm, text-base, etc. |
--spacing-* |
p-, m-, gap-, w-, h-* |
--radius-* |
rounded-* |
--shadow-* |
shadow-* |
--breakpoint-* |
sm:, md:, lg:, xl: |
--animate-* |
animate-spin, animate-bounce, etc. |
--ease-* |
ease-in, ease-out, ease-in-out |
/* v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* v4 */
@import "tailwindcss";
| v3 | v4 |
|---|---|
shadow-sm |
shadow-xs |
shadow |
shadow-sm |
rounded-sm |
rounded-xs |
rounded |
rounded-sm |
outline-none |
outline-hidden |
ring |
ring-3 |
bg-opacity-* → use bg-black/50text-opacity-* → use text-black/50flex-shrink-* → use shrink-*flex-grow-* → use grow-*/* v3 */
@layer utilities {
.tab-4 {
tab-size: 4;
}
}
/* v4 */
@utility tab-4 {
tab-size: 4;
}
<!-- v3 -->
<div class="bg-[--brand-color]"></div>
<!-- v4 -->
<div class="bg-(--brand-color)"></div>
<!-- v3 -->
<div class="!bg-red-500">
<!-- v4 -->
<div class="bg-red-500!">
npx @tailwindcss/upgrade
Requires Node.js 20+
@theme config or using @utility/@variant/@custom-variant directives--alpha()/--spacing() CSS functions or @apply