Tailwind V4
Tailwind CSS v4 usage guide and v3-to-v4 differences.
Install
npx skills add mastra-ai/mastra --skill tailwind-v4 -g -a claude-code -y- Repository
- mastra-ai/mastra29.3k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 2,468 tokens
- Runs scripts
- No, instructions only
What it does
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.
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.
