fusengine/tailwindcss-v4
plugins/tailwindcss/skills/tailwindcss-v4/SKILL.md
Tailwind CSS v4.1 core features: @theme namespaces, CSS-first configuration, custom directives (@utility, @variant, @custom-variant), v3-to-v4 breaking changes, and the upgrade tool. Use when: migrating a project from Tailwind v3 to v4, mapping @theme namespaces to generated utilities, or looking up renamed/removed v3 utilities. Do NOT use for: day-to-day CSS-first configuration reference — @theme/@utility/@variant details (use tailwindcss-core), utility class lookup (use the category skills).
$ install --global
skillsauthnpx skillsauth add fusengine/agents tailwindcss-v4Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 17, 2026, 2:45 AM88.5s4 files scanned
SKILL.md
- name:
- tailwindcss-v4
- description:
- Tailwind CSS v4.1 core features: @theme namespaces, CSS-first configuration, custom directives (@utility, @variant, @custom-variant), v3-to-v4 breaking changes, and the upgrade tool. Use when: migrating a project from Tailwind v3 to v4, mapping @theme namespaces to generated utilities, or looking up renamed/removed v3 utilities. Do NOT use for: day-to-day CSS-first configuration reference — @theme/@utility/@variant details (use tailwindcss-core), utility class lookup (use the category skills).
- user-invocable:
- false
Tailwind CSS v4.1 Core
Documentation
- CSS theme variables, design tokens, customization -> tailwindcss-core
- Directives (@utility, @variant, @theme, @apply) -> tailwindcss-core
- Custom utilities and variants -> tailwindcss-custom-styles
- Content detection (@source scanning) -> tailwindcss-core
- Migration from v3 to v4 -> see "v3 → v4 Breaking Changes" section below
Quick Reference - @theme Namespaces
| 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 → v4 Breaking Changes
Removed @tailwind directives
/* v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* v4 */
@import "tailwindcss";
Renamed utilities
| v3 | v4 |
|----|-----|
| shadow-sm | shadow-xs |
| shadow | shadow-sm |
| rounded-sm | rounded-xs |
| rounded | rounded-sm |
| outline-none | outline-hidden |
| ring | ring-3 |
Removed deprecated utilities
bg-opacity-*→ usebg-black/50text-opacity-*→ usetext-black/50flex-shrink-*→ useshrink-*flex-grow-*→ usegrow-*
Custom utilities syntax
/* v3 */
@layer utilities {
.tab-4 {
tab-size: 4;
}
}
/* v4 */
@utility tab-4 {
tab-size: 4;
}
Variables in arbitrary values
<!-- v3 -->
<div class="bg-[--brand-color]"></div>
<!-- v4 -->
<div class="bg-(--brand-color)"></div>
Important modifier position
<!-- v3 -->
<div class="!bg-red-500">
<!-- v4 -->
<div class="bg-red-500!">
Upgrade Tool
npx @tailwindcss/upgrade
Requires Node.js 20+
Detailed References
- configuration.md - Load when writing CSS-first
@themeconfig or using@utility/@variant/@custom-variantdirectives - api-functions.md - Load when using the
--alpha()/--spacing()CSS functions or@apply - installation-support.md - Load when installing Tailwind v4 (npm/Vite/CLI) or checking browser support
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026