tailwind-4-docs

Answers Tailwind CSS v4 questions using a locally synced official documentation snapshot.

Updated Sep 17, 2026
One-click install
npx skills add https://github.com/juanjaragavi/utilities-manager --skill tailwind-4-docs-juanjaragavi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-4-docs
Source: https://github.com/juanjaragavi/utilities-manager/tree/main/.agents/skills/tailwind-4-docs
Command: npx skills add https://github.com/juanjaragavi/utilities-manager --skill tailwind-4-docs-juanjaragavi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Tailwind CSS v4 introduced breaking changes in imports, tooling, utilities, and variants, and generic model knowledge is often outdated or wrong. This Skill grounds every answer in a locally synced snapshot of the official Tailwind v4 docs, so configuration, migration, and implementation guidance matches the real documentation. ## Core Features & Use Cases - Local docs snapshot: Syncs the official tailwindcss.com docs into references/docs/ with an index for fast topic lookup. - Migration guidance: Covers v3-to-v4 upgrade checks including @import "tailwindcss", new PostCSS/CLI/Vite packages, utility renames, and prefix syntax. - Engineering playbook: Provides an abstraction ladder (utilities, tokens, custom utilities, component classes) for implementation, refactor, and review tasks. - Use Case: When upgrading a project from Tailwind v3, ask the agent to verify breaking changes; it loads the upgrade guide and gotchas reference and flags issues like @tailwind directives or transform-none renames. ## Quick Start Ask the agent to run the sync script with the license flag to initialize the docs snapshot, then ask any Tailwind v4 question such as how to configure custom theme tokens.

Frequently Asked Questions about tailwind-4-docs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a project from Tailwind CSS v3 to v4?▼

Tailwind v4 migration replaces `@tailwind` directives with `@import "tailwindcss"`, moves PostCSS to `@tailwindcss/postcss`, and renames several utilities. This Skill loads the official upgrade guide and compatibility docs to walk through each breaking change.

How do I configure custom theme tokens in Tailwind CSS v4?▼

Tailwind v4 uses CSS-first configuration with `@theme` for design tokens that generate utilities or variants. Tokens must be top-level, and plain CSS variables that should not create utilities belong in `:root` instead.

Why are my Tailwind v4 classes not being generated?▼

Tailwind scans source files as plain text, so dynamically concatenated class fragments are never detected. Use full class strings, `@source` for unusual file locations, or `@source inline()` only when safelisting is truly necessary.

Does Tailwind CSS v4 support older browsers?▼

Tailwind v4 targets modern browsers only: Safari 16.4+, Chrome 111+, and Firefox 128+. Projects requiring older browser support should stay on v3 or verify the compatibility documentation before upgrading.

When should I use @apply versus utilities in Tailwind v4?▼

Use `@apply` sparingly, mainly for styling third-party markup you do not control. The engineering playbook recommends composing utilities in markup first, then extracting markup, tokens, or custom utilities before creating component classes.