Tailwind 4 Docs
Ground Tailwind CSS v4 utility, config, and migration answers in a locally synced official docs snapshot while you build or refactor UI.
Overview
Tailwind 4 Docs is an agent skill most often used in Build (also Ship review and Validate prototype) that answers Tailwind CSS v4 questions from a locally synced official documentation snapshot with initialization and mi
Install
npx skills add https://github.com/lombiq/tailwind-agent-skills --skill tailwind-4-docsWhat is this skill?
- Workflow to initialize and refresh a local Tailwind v4 docs snapshot from tailwindcss.com (git + Python 3, not bundled w
- Navigate via `references/docs-index.tsx` and load only the matching page from `references/docs/` to keep context small.
- Covers utilities, variants, configuration, compatibility, and v3→v4 migration with official guidance and gotcha checks.
- Hard gate: if the snapshot is missing or older than one week, stop and run initialization before answering.
- Supports implementation, refactor, and code-review tasks with extra reference loads when the SKILL.md specifies them.
- Targets Tailwind CSS v4 documentation synced from tailwindcss.com.
- Snapshot refresh recommended when older than one week per skill workflow.
- Requires git, Python 3, and network access to initialize the docs mirror.
Adoption & trust: 2.5k installs on skills.sh; 43 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need accurate Tailwind v4 utilities, variants, and config guidance—and a safe v3 migration path—but generic model knowledge drifts from the current docs.
Who is it for?
Solo builders shipping web UI with Tailwind v4 who can run the one-time snapshot init and want agents to cite synced official docs during coding or migration.
Skip if: Teams that will not initialize or refresh the local docs mirror, pure non-Tailwind stacks, or v3-only projects with no plan to touch v4 configuration.
When should I use this skill?
Answering Tailwind v4 questions, selecting utilities or variants, configuring Tailwind v4, or migrating projects from v3 to v4 with official docs and gotcha checks.
What do I get? / Deliverables
After initializing or refreshing the local snapshot, you get index-guided answers and implementation or migration steps aligned with official Tailwind v4 pages instead of ad-hoc recall.
- Doc-index-guided answers grounded in loaded official Tailwind v4 pages
- v3→v4 migration and compatibility guidance with gotcha checks from the skill workflow
- Implementation or refactor recommendations aligned with the referenced utility and config docs
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Tailwind v4 questions surface most often while implementing or styling product UI, so the canonical shelf is Build → frontend even though the same reference supports review and migration work. Utility selection, `@theme`, and v4 CSS-first setup are day-to-day frontend authoring tasks; this skill is the doc-backed copilot for that subphase.
Where it fits
Pick v4 spacing and color utilities for a landing prototype without importing deprecated v3 config patterns.
Map a component redesign to the correct v4 variants and `@theme` tokens while implementing in React or HTML.
Review a PR for v3-era `@apply` or config files that break under Tailwind v4’s CSS-first setup.
Align PostCSS, Vite, or framework plugins with v4 compatibility notes from the synced docs before merge.
How it compares
Use as a docs-snapshot procedural skill for grounded v4 answers, not as a live MCP server or undocumented chat guesses about Tailwind APIs.
Common Questions / FAQ
Who is tailwind-4-docs for?
It is for solo and indie builders using agentic coding tools who work in Tailwind CSS v4 and want utilities, variants, config, and migration guidance tied to an official docs mirror they maintain locally.
When should I use tailwind-4-docs?
Use it in Build while picking classes and theme tokens, in Validate when prototyping styled pages, and in Ship when reviewing or refactoring Tailwind for v4 correctness; also whenever migrating from v3 or debugging v4 configuration.
Is tailwind-4-docs safe to install?
Review the Security Audits panel on this Prism page for the ingested package signals; the skill needs git, Python 3, network access to fetch docs, and filesystem writes for the snapshot—you must comply with Tailwind’s upstream license for the mirrored content.
SKILL.md
READMESKILL.md - Tailwind 4 Docs
# Tailwind 4 Docs ## Overview Use this skill to navigate a locally synced Tailwind CSS v4 documentation snapshot and answer development, configuration, migration, implementation, refactor, and review questions with official guidance. The docs snapshot is not bundled with this skill because the upstream repository is source-available but not open-source. Users must initialize the snapshot themselves and are responsible for complying with the upstream license. ## Quick start 1. Check whether the docs snapshot is initialized (`references/docs/` and `references/docs-index.tsx` exist). 2. If the snapshot is missing or older than one week, stop and ask to run the initialization step in "Initialization" before continuing. Do not answer the user's question until the snapshot is initialized. 3. Identify the topic (utility, variant, config, migration, compatibility, implementation, refactor, review). 4. Find the matching doc in `references/docs-index.tsx`. 5. Load only the relevant file from `references/docs/`. 6. For implementation, refactor, or review tasks, also load `references/engineering-playbook.md`. 7. Apply guidance and call out any breaking changes or constraints. ## Initialization (required once per install) Run the sync script to download the Tailwind docs locally. This requires network access, git, and Python 3: ``` python skills/tailwind-4-docs/scripts/sync_tailwind_docs.py --accept-docs-license ``` This pulls content from `tailwindlabs/tailwindcss.com`. That repo is source-available and explicitly not open-source, so the user must accept its license before downloading and keep the snapshot local. If you cannot run tools or have no internet access, ask the user to run the exact command above in a terminal, then continue once `references/docs/` and `references/docs-index.tsx` exist. If the snapshot is missing or older than one week, you must ask for permission to run the command or ask the user to run it. Do not proceed with Tailwind guidance until the snapshot is initialized or refreshed. If initialization is blocked (no internet or no write access), use `references/gotchas.md` as a limited fallback and ask the user to consult the official docs. For implementation, refactor, or review tasks, `references/engineering-playbook.md` can also serve as a limited fallback. ## References map - `references/docs/` is generated locally and contains the Tailwind v4 MDX docs snapshot. - `references/docs-index.tsx` is generated locally and contains the category and slug map used by the docs sidebar. - `references/docs-source.txt` captures the upstream repo, commit, and snapshot date (or reports that initialization is pending). - `references/engineering-playbook.md` is the agent-oriented implementation, refactor, and review guide. - `references/gotchas.md` provides a quick scan of common v4 migration pitfalls. ## MDX handling - Treat `export const title` and `export const description` as metadata. - Read JSX callouts like `<TipInfo>` or `<TipBad>` as guidance text. ## Common entry points - Migration: `references/docs/upgrade-guide.mdx`, `references/docs/compatibility.mdx`. - Implementation/refactor/review: `references/engineering-playbook.md`. - Gotchas overview: `references/gotchas.md`. - Configuration and directives: `references/docs/functions-and-directives.mdx`, `references/docs/adding-custom-styles.mdx`, `references/docs/theme.mdx`. - Variants and responsive patterns: `references/docs/hover-focus-and-other-states.mdx`, `references/docs/responsive-design.mdx`. - Core behavior: `references/docs/preflight.mdx`, `r