Tailwindcss v4

Skill fusengine/agents/plugins/tailwindcss/skills/tailwindcss-v4

Redefining development through cognitive automation and collaborative agent systems.

Install

npx -y skills add fusengine/agents --skill tailwindcss-v4

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

22 stars22 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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).

SKILL.md

3.1 KB, as published. Nobody here has run it

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-* → use bg-black/50
text-opacity-* → use text-black/50
flex-shrink-* → use shrink-*
flex-grow-* → use grow-*

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 @theme config or using @utility/@variant/@custom-variant directives
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