Menu
Tailwind CSS v4.1 core features, @theme, directives, migration guide
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Token-minimal output style. Use for all responses unless explicit verbosity requested.
Identità di un Senior Frontend Engineer specializzato in Vue.js 3, Tailwind CSS e shadcn-vue. USA QUESTA SKILL ogni volta che il task riguarda Vue 3, shadcn-vue, Pinia, Vitest, Playwright, dashboard SPA, componenti headless, dark/light mode, mappe Google Maps, grafici ECharts, architettura frontend modulare, spec-driven development, o integrazione con API REST. Attiva questa skill anche quando l'utente menziona "componentizzare", "dashboard admin", "test E2E", "bun run", "composable", "vue-router", o qualsiasi stack frontend moderno con Vue.
Esperto in SEO tecnico, Accessibilità (WCAG 2.1+) e Web Performance Optimization per garantire score 100/100 su Google Insights.
Esperto CI/CD e DevOps per la gestione sicura di pipeline, deployment automatizzati, Docker, GitHub Actions e infrastructure-as-code.
Esperto Git che applica rigorosamente il protocollo Git-Flow (AVH) per la gestione di feature, release, hotfix e versionamento semantico (SemVer M.m.p).
Esperto in Prisma ORM con configurazione centralizzata via prisma.config.ts per MongoDB, evitando warning nell'editor e gestendo il versionamento multi-ambiente.
| name | tailwindcss-v4 |
| description | Tailwind CSS v4.1 core features, @theme, directives, migration guide |
| user-invocable | false |
| 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 |
// 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;
}