Agent skill

Tailwind V4

Tailwind CSS v4 conventions for real projects — CSS-first configuration with @theme, automatic content detection, the v3-to-v4 migration diffs, and dynamic class-name safety.

Apache-2.0Auto-check passedFrontend & Design

Install Tailwind V4

skills CLI

$ npx skills add boraoztunc/skills --skill tailwind-v4 -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills tailwind-v4 --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/tailwind-v4 .claude/skills/tailwind-v4 && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "tailwind-v4" agent skill from https://github.com/boraoztunc/skills/tree/main/tailwind-v4 into .claude/skills/tailwind-v4/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-v4", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/boraoztunc/skills/tree/main/tailwind-v4

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add boraoztunc/skills --skill tailwind-v4 -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills tailwind-v4 --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/tailwind-v4 .agents/skills/tailwind-v4 && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "tailwind-v4" agent skill from https://github.com/boraoztunc/skills/tree/main/tailwind-v4 into .agents/skills/tailwind-v4/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-v4", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add boraoztunc/skills --skill tailwind-v4 -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills tailwind-v4 --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/tailwind-v4 .cursor/skills/tailwind-v4 && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "tailwind-v4" agent skill from https://github.com/boraoztunc/skills/tree/main/tailwind-v4 into .cursor/skills/tailwind-v4/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-v4", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/boraoztunc/skills.git --path tailwind-v4

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add boraoztunc/skills --skill tailwind-v4 -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills tailwind-v4 --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/tailwind-v4 .gemini/skills/tailwind-v4 && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "tailwind-v4" agent skill from https://github.com/boraoztunc/skills/tree/main/tailwind-v4 into .gemini/skills/tailwind-v4/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-v4", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install boraoztunc/skills tailwind-v4

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add boraoztunc/skills --skill tailwind-v4 -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/tailwind-v4 .github/skills/tailwind-v4 && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "tailwind-v4" agent skill from https://github.com/boraoztunc/skills/tree/main/tailwind-v4 into .github/skills/tailwind-v4/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-v4", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add boraoztunc/skills --skill tailwind-v4 -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install boraoztunc/skills tailwind-v4 --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/boraoztunc/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/tailwind-v4 .opencode/skills/tailwind-v4 && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "tailwind-v4" agent skill from https://github.com/boraoztunc/skills/tree/main/tailwind-v4 into .opencode/skills/tailwind-v4/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tailwind-v4", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: tailwind-v4
GitHub stars: 397
Token cost: ~1.6k tokens
SKILL.md length: 547 words
Files: 1
Skills in repo: 52
Repo updated: Aug 15, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

Tailwind CSS v4 conventions for real projects — CSS-first configuration with @theme, automatic content detection, the v3-to-v4 migration diffs, and dynamic class-name safety.

Writing Tailwind utilities
SKILL.md covers Detect the version first, v4 setup, Configuration is CSS-first and Migrating v3 → v4, plus 4 more sections
Calls npm and npx
Upgrading Tailwind

What it does

Tailwind V4 is an agent skill from boraoztunc/skills. Tailwind CSS v4 conventions for real projects — CSS-first configuration with @theme, automatic content detection, the v3-to-v4 migration diffs, and dynamic class-name safety. Use when writing Tailwind utilities, setting up or upgrading Tailwind, defining design tokens as Tailwind theme values, debugging classes that do not generate, or when unsure whether a project is on v3 or v4.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering CSS and styling and Design tokens. It works with Tailwind CSS. The repository describes itself as: Claude Code skills for copywriting, SEO, design, and more. The licence is Apache-2.0.

When your agent uses it

Writing Tailwind utilities
Upgrading Tailwind
Defining design tokens as Tailwind theme values
Debugging classes that do not generate

Example prompts

“/tailwind-v4”

Requirements

Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit 645553c. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npm
- npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm and npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tailwind V4 loads about 1.6k tokens when it runs. Until then it costs about 99 tokens; SKILL.md has 547 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~99
When it runs · the whole SKILL.md, loaded when a task matches: ~1.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from boraoztunc/skills at commit 645553c, republished under its Apache-2.0 licence (© boraoztunc). 547 words, ~1,578 tokens.

Download SKILL.mdSave it as .claude/skills/tailwind-v4/SKILL.md (or your agent's skills folder).

name: tailwind-v4
description: Tailwind CSS v4 conventions for real projects — CSS-first configuration with @theme, automatic content detection, the v3-to-v4 migration diffs, and dynamic class-name safety. Use when writing Tailwind utilities, setting up or upgrading Tailwind, defining design tokens as Tailwind theme values, debugging classes that do not generate, or when unsure whether a project is on v3 or v4.

Tailwind CSS v4

Detect the version first

This is the highest-value step. v3 and v4 configure completely differently, and guidance for one is actively wrong for the other.

bash

# Check the installed major version
npm ls tailwindcss --depth=0 2>/dev/null || grep '"tailwindcss"' package.json

Signal	Version
`@import "tailwindcss";` in CSS	v4
`@tailwind base; @tailwind components; @tailwind utilities;`	v3
`@theme { }` block in CSS	v4
`tailwind.config.js` with a `content: [...]` array	v3 (or a v4 project using the compat layer)
`@config "./tailwind.config.js";`	v4 loading a legacy config
`@tailwindcss/postcss` or `@tailwindcss/vite` dependency	v4
`autoprefixer` + `postcss-import` required in postcss config	v3

Never write a tailwind.config.js for a v4 project by default. v4 reads configuration from CSS. A hand-added config file is silently ignored unless explicitly loaded with @config.

v4 setup

css

/* app.css — the single entry point */
@import "tailwindcss";

That one line replaces the three @tailwind directives, and it also handles postcss-import and autoprefixer internally — remove both from the PostCSS config.

Vite:

// vite.config.js
import tailwindcss from "@tailwindcss/vite";
export default { plugins: [tailwindcss()] };

PostCSS:

// postcss.config.mjs
export default { plugins: { "@tailwindcss/postcss": {} } };

Configuration is CSS-first

Design tokens go in @theme. Every entry generates the matching utilities and exposes a real CSS custom property.

css

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.62 0.19 250);
  --color-brand-muted: oklch(0.72 0.08 250);
  --font-display: "IBM Plex Sans", sans-serif;
  --radius-card: 14px;
  --spacing-gutter: 2.75rem;
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

--color-brand yields bg-brand, text-brand, border-brand, … and is readable anywhere as var(--color-brand). That dual nature is the main v4 win: tokens are no longer trapped inside a JS config.

Namespaces map to utility families — --color-*, --font-*, --text-*, --spacing-*, --radius-*, --shadow-*, --ease-*, --animate-*, --breakpoint-*.

Override a whole namespace, or everything:

css

@theme {
  --color-*: initial;          /* drop the default palette */
  --color-ink: #18181b;
}

No content array. v4 detects source files automatically, honoring .gitignore and skipping binaries. Point it at extra sources only when needed:

css

@source "../packages/ui/src";           /* add a path outside the project root */
@source not "../legacy";                 /* exclude */
@source inline("bg-red-500 bg-red-600"); /* the v4 replacement for safelist */

Migrating v3 → v4

Run the codemod first, then review the diff:

bash

npx @tailwindcss/upgrade

The renames that break silently:

v3	v4
`shadow-sm`	`shadow-xs`
`shadow`	`shadow-sm`
`rounded-sm`	`rounded-xs`
`rounded`	`rounded-sm`
`blur-sm`	`blur-xs`
`outline-none`	`outline-hidden`
`bg-opacity-50`	`bg-black/50` (slash opacity only)
`flex-shrink-0`	`shrink-0`

The bare shadow → shadow-sm and rounded → rounded-sm shifts are the dangerous pair: the old class names still exist but now mean one step smaller, so a v3 codebase silently loses a step of elevation and radius everywhere rather than erroring.

Other behavior changes to expect:

Default border color is now currentColor, not gray-200. border alone inherits text color — set the color explicitly.
Default ring is 1px currentColor, was 3px blue. ring → ring-3 to keep v3 sizing.
Space-between uses a different selector; sibling-margin edge cases can shift.
Hover only applies where the device actually supports hover.
Variant stacking now reads left-to-right.

Show full SKILL.md (187 more words)Show less

Dynamic class names

The rule survives from v3, because the scanner still reads source text statically:

jsx

// BROKEN — never generated
<div className={`text-${color}-500`} />

// CORRECT — complete class names, statically visible
const TONE = {
  danger: "text-red-500",
  success: "text-emerald-500",
};
<div className={TONE[tone]} />

v4 does support dynamic values on many utilities without config — grid-cols-15, w-17, mt-23 work arbitrarily. What cannot be assembled is the class name string. For genuinely runtime-only values, use an inline style or a CSS variable, not string concatenation:

jsx

<div className="w-(--w)" style={{ "--w": `${pct}%` }} />

Practical patterns

Dark mode. v4 defaults to prefers-color-scheme. For class-based toggling:

css

@custom-variant dark (&:where(.dark, .dark *));

Component extraction order. Prefer a real component over @apply. When you do need shared CSS, v4 wants @utility:

css

@utility card {
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

Heavy @apply use forfeits the point of utilities and inflates CSS — reach for it last, not first.

Arbitrary values stay available for one-offs: top-[117px], bg-[oklch(0.7_0.1_200)], grid-cols-[1fr_auto].

Common failures

Classes not generating → a dynamically-built class name, or a source file outside auto-detection (add @source).
A tailwind.config.js having no effect → v4 project without @config.
Build errors after upgrade → postcss-import/autoprefixer still in the PostCSS chain; v4 includes both.
Borders/rings looking wrong post-migration → the currentColor and ring-1 default changes above.
Elevation subtly flattened post-migration → the shadow/rounded rename shift.

visual-style-presets — pick a direction, then encode its tokens in @theme
beautiful-shadows — exact layered shadows as arbitrary utilities

Files

Just SKILL.md in tailwind-v4 of boraoztunc/skills.

Open the folder on GitHubat commit 645553c

Compare with similar skills

Tailwind V4 next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Tailwind V4 compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Tailwind V4 this skillboraoztunc/skills	397	—	~1.6k	Automated safety check: Pass	Apache-2.0	1 mo ago
MCP Developmentcoollabsio/coolify	63k	1 repos	~949	Automated safety check: Pass	MIT	today
Tailwind Design SystemSuFxGIT/scoutarr	115	5 repos	~5.6k	Automated safety check: Pass	None	6 mo ago
Extract DesignManavarya09/design-extract	4.2k	—	~786	Automated safety check: Notes	MIT	yesterday
Tailwind Theme Builderjezweb/claude-skills	1.1k	1 repos	~3.2k	Automated safety check: Pass	MIT	4 days ago
Tailwind Design Systemjh941213/my-cc-harness	126	10 repos	~4.7k	Automated safety check: Pass	None	2 mo ago

Similar skills

MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
63k GitHub starsUsed in 1 repo~949 tokens
Frontend & DesignAuto-check passed
Tailwind Design System
SuFxGIT/scoutarr
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.
115 GitHub starsUsed in 5 repos~5.6k tokens
Frontend & DesignAuto-check passed
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
4.2k GitHub stars~786 tokensUpdated yesterday
Frontend & DesignAuto-check: notes
Tailwind Theme Builder
jezweb/claude-skills
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.
1.1k GitHub starsUsed in 1 repo~3.2k tokens
Frontend & DesignAuto-check passed
Tailwind Design System
jh941213/my-cc-harness
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns.
126 GitHub starsUsed in 10 repos~4.7k tokens
Frontend & DesignAuto-check passed
Preline Theme Generator
htmlstreamofficial/preline
Generates light and dark Preline theme CSS from a brand color or mood, previews it, and validates token coverage through bundled local scripts.
6.5k GitHub stars~619 tokensUpdated 1 mo ago
Frontend & DesignAuto-check: warnings

Questions about Tailwind V4

What does Tailwind V4 do?

Tailwind CSS v4 conventions for real projects — CSS-first configuration with @theme, automatic content detection, the v3-to-v4 migration diffs, and dynamic class-name safety. Tailwind V4 is an agent skill from boraoztunc/skills. Tailwind CSS v4 conventions for real projects — CSS-first configuration with @theme, automatic content detection, the v3-to-v4 migration diffs, and dynamic class-name safety.

When should I use Tailwind V4?

Tailwind V4 fits situations like: writing Tailwind utilities; upgrading Tailwind; defining design tokens as Tailwind theme values; debugging classes that do not generate.

How do I install Tailwind V4 in Claude Code?

Run `npx skills add boraoztunc/skills --skill tailwind-v4 -a claude-code`. Or copy the skill folder (tailwind-v4 in boraoztunc/skills) into .claude/skills/tailwind-v4 in your project. Claude Code loads it when a task matches its description.

How do I install Tailwind V4 in Codex?

Run `npx skills add boraoztunc/skills --skill tailwind-v4 -a codex`. Or copy the skill folder (tailwind-v4 in boraoztunc/skills) into .agents/skills/tailwind-v4 in your project. Codex loads it when a task matches its description.

Can I use Tailwind V4 in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add boraoztunc/skills --skill tailwind-v4 -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tailwind-v4, .gemini/skills/tailwind-v4, .github/skills/tailwind-v4 and .opencode/skills/tailwind-v4 in your project.

What does Tailwind V4 need to run?

Going by SKILL.md and its folder, Tailwind V4 needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.

Does Tailwind V4 access the network?

SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Tailwind V4 safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Tailwind V4 use?

Tailwind V4 is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tailwind V4 use?

About 1.6k tokens (SKILL.md is roughly 6.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Tailwind V4?

Skills that share tags, products or a category with Tailwind V4: MCP Development (coollabsio/coolify, 63k stars), Tailwind Design System (SuFxGIT/scoutarr, 115 stars), Extract Design (Manavarya09/design-extract, 4.2k stars) and Tailwind Theme Builder (jezweb/claude-skills, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tailwind V4?

boraoztunc (a GitHub user) maintains it in boraoztunc/skills, which has 397 GitHub stars. The repository holds 52 skills in this directory. The repository was last updated on August 15, 2026.

Source: boraoztunc/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Tailwind V4

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Tailwind CSS v4

Detect the version first

v4 setup

Configuration is CSS-first

Migrating v3 → v4

Dynamic class names

Practical patterns

Common failures

Related skills

Files

Compare with similar skills

Similar skills

More from boraoztunc/skills

Related

Questions about Tailwind V4