Tailwind CSS v4.1 core features, @theme, directives, migration guide
/plugin marketplace add fusengine/agents/plugin install fuse-tailwindcss@fusengine-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
| Namespace | Utilities generees |
|---|---|
--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 |
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: { brand: '#3B82F6' }
}
}
}
@import "tailwindcss";
@theme {
--color-brand: #3B82F6;
}
@utility tab-4 {
tab-size: 4;
}
/* Usage: class="tab-4" */
.card {
@variant dark {
background: #1a1a2e;
}
}
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
/* Usage: dark:bg-gray-900 */
/* 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+
npm install -D tailwindcss @tailwindcss/postcss
# or for Vite
npm install -D @tailwindcss/vite
# or for CLI
npm install -D @tailwindcss/cli
Adjust color opacity:
color: --alpha(var(--color-lime-300) / 50%);
Generate spacing values:
margin: --spacing(4);
Inline utility classes:
.btn {
@apply px-4 py-2 rounded-lg font-bold;
}
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.