# Tailwind V4

Tailwind CSS v4 usage guide and v3-to-v4 differences.

- Repository: https://github.com/mastra-ai/mastra (29259 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mastra-ai/mastra --skill tailwind-v4 -g -a claude-code -y`
Codex: `npx skills add mastra-ai/mastra --skill tailwind-v4 -g -a codex -y`
Cursor: `npx skills add mastra-ai/mastra --skill tailwind-v4 -g -a cursor -y`
Gemini CLI: `npx skills add mastra-ai/mastra --skill tailwind-v4 -g -a gemini-cli -y`

## Description

Tailwind CSS v4 usage guide and v3-to-v4 differences. This skill should be used when writing, reviewing, or refactoring any Tailwind CSS code in this repo. Triggers on tasks involving Tailwind classes, @theme blocks, CSS-first configuration, or cleanup of v3-era syntax.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Tailwind CSS v4

How to write idiomatic Tailwind v4 and spot v3-era syntax that still compiles but should not appear in new code.

## Version and sources

Check the pinned version before using recent utilities: the playground packages pin `tailwindcss` in their `package.json` (4.3.3 at the time of writing, including v4.3 utilities like `scrollbar-*`, `zoom-*`, and `tab-*`). When unsure whether a utility, variant, or directive exists in the pinned version, verify against the docs instead of guessing:

- Utility/variant reference: https://tailwindcss.com/docs
- v3 → v4 migration: https://tailwindcss.com/docs/upgrade-guide
- What each minor added: https://tailwindcss.com/blog/tailwindcss-v4 (and `/tailwindcss-v4-1`, `/tailwindcss-v4-3`, ...)

## CSS-first configuration

Tailwind v4 is configured in CSS, not JavaScript.

The rest: https://github.com/mastra-ai/mastra/blob/HEAD/.claude/skills/tailwind-v4/SKILL.md