How do I install the Tailwind skill?

Run npx skillmds@latest add majiayu000/tailwind-7 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tailwind safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tailwind?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tailwind free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tailwind?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tailwind by majiayu000 — Agent Skill

Name: Tailwind
Rating: 4.2 (5 reviews)
Author: majiayu000

Tailwind

Tailwind CSS v4 best-practices skill covering utility-first patterns, @theme variables, responsive design, dark mode, custom styles, performance, accessibility, and a Figma-to-Tailwind theme generation workflow. Use when the user mentions Tailwind, tailwindcss, @theme, utility classes, Tailwind config, Figma design tokens, or asks to build, configure, audit, or migrate a Tailwind CSS project (including v3 to v4 migrations).

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

Tailwind CSS Best Practices

Tailwind CSS v4 guide organized as modular rules. Covers the utility-first model, @theme variables, responsive/state variants, custom styles, performance, accessibility, and the Figma → Tailwind theme workflow for generating design tokens directly from Figma variables.

ROUTING: Which rule file to load

IF setting up Tailwind or understanding how utility classes work: → Read rules/core-utility-model.md

IF working with theme variables (@theme), design tokens, colors, fonts, spacing: → Read rules/core-theme-variables.md

IF working with responsive design, hover/focus states, dark mode, or custom variants: → Read rules/core-responsive-and-states.md

IF adding custom CSS, component classes, base styles, or custom utilities: → Read rules/core-custom-styles.md

IF optimizing build size, purging unused classes, or configuring content detection: → Read rules/perf-purging-and-scanning.md

IF working on accessibility or dark mode strategies: → Read rules/a11y-and-dark-mode.md

IF translating Figma variables/design tokens into Tailwind v4 theme CSS: → Read rules/figma-to-theme-workflow.md + see figma-tokens/ templates

Rule index

Topic	Description	File
Sections overview	Categories and reading order	rules/_sections.md
Utility model	Utility-first principles, composing classes, arbitrary values	rules/core-utility-model.md
Theme variables	`@theme` directive, namespaces, extend/override, `inline`/`static`	rules/core-theme-variables.md
Responsive & states	Breakpoints, hover/focus/dark variants, custom variants	rules/core-responsive-and-states.md
Custom styles	`@layer`, `@utility`, `@variant`, component classes	rules/core-custom-styles.md
Performance	Content detection, JIT, build optimization	rules/perf-purging-and-scanning.md
A11y & dark mode	Accessibility utilities, dark mode patterns	rules/a11y-and-dark-mode.md
Figma workflow	Agent workflow: Figma variables → Tailwind `@theme` CSS	rules/figma-to-theme-workflow.md

Figma → Tailwind theme workflow

This skill includes a dedicated agent workflow to convert Figma design variables into Tailwind v4 @theme CSS files. The workflow is described in rules/figma-to-theme-workflow.md and uses the annotated templates in figma-tokens/ as output targets.

How to trigger it: paste your Figma CSS variables into chat and ask the agent to generate the Tailwind theme files.

Template files in figma-tokens/:

colors.css — --color-* namespace
typography.css — --font-*, --text-*, --font-weight-*, --tracking-*, --leading-*
spacing.css — --spacing and --spacing-*
radius-shadows.css — --radius-*, --shadow-*
breakpoints.css — --breakpoint-*

Rule categories by priority

Priority	Category	Impact	Prefix
1	Utility model & theme	CRITICAL	`core-`
2	Responsive & states	HIGH	`core-`
3	Custom styles	HIGH	`core-`
4	Figma workflow	HIGH	(standalone)
5	Performance	MEDIUM-HIGH	`perf-`
6	Accessibility	MEDIUM	`a11y-`

Coverage and maintenance

Coverage map: rules/_coverage-map.md
Source: https://tailwindcss.com/docs (v4.2)
Update when Tailwind releases a new major/minor version with breaking @theme changes.

---name: tailwind-7description: Tailwind CSS v4 best-practices skill covering utility-first patterns, @theme variables, responsive design, dark mode, custom styles, performance, accessibility, and a Figma-to-Tailwind theme generation workflow. Use when the user mentions Tailwind, tailwindcss, @theme, utility classes, Tailwind config, Figma design tokens, or asks to build, configure, audit, or migrate a Tailwind CSS project (including v3 to v4 migrations).--- # Tailwind CSS Best Practices Tailwind CSS v4 guide organized as modular rules. Covers the utility-first model, `@theme` variables, responsive/state variants, custom styles, performance, accessibility, and the **Figma → Tailwind theme workflow** for generating design tokens directly from Figma variables. ## ROUTING: Which rule file to load **IF setting up Tailwind or understanding how utility classes work:** → Read `rules/core-utility-model.md` **IF working with theme variables (`@theme`), design tokens, colors, fonts, spacing:** → Read `rules/core-theme-variables.md` **IF working with responsive design, hover/focus states, dark mode, or custom variants:** → Read `rules/core-responsive-and-states.md` **IF adding custom CSS, component classes, base styles, or custom utilities:** → Read `rules/core-custom-styles.md` **IF optimizing build size, purging unused classes, or configuring content detection:** → Read `rules/perf-purging-and-scanning.md` **IF working on accessibility or dark mode strategies:** → Read `rules/a11y-and-dark-mode.md` **IF translating Figma variables/design tokens into Tailwind v4 theme CSS:** → Read `rules/figma-to-theme-workflow.md` + see `figma-tokens/` templates ## Rule index | Topic | Description | File | |-------|-------------|------| | Sections overview | Categories and reading order | [rules/_sections.md](rules/_sections.md) | | Utility model | Utility-first principles, composing classes, arbitrary values | [rules/core-utility-model.md](rules/core-utility-model.md) | | Theme variables | `@theme` directive, namespaces, extend/override, `inline`/`static` | [rules/core-theme-variables.md](rules/core-theme-variables.md) | | Responsive & states | Breakpoints, hover/focus/dark variants, custom variants | [rules/core-responsive-and-states.md](rules/core-responsive-and-states.md) | | Custom styles | `@layer`, `@utility`, `@variant`, component classes | [rules/core-custom-styles.md](rules/core-custom-styles.md) | | Performance | Content detection, JIT, build optimization | [rules/perf-purging-and-scanning.md](rules/perf-purging-and-scanning.md) | | A11y & dark mode | Accessibility utilities, dark mode patterns | [rules/a11y-and-dark-mode.md](rules/a11y-and-dark-mode.md) | | **Figma workflow** | **Agent workflow: Figma variables → Tailwind `@theme` CSS** | [rules/figma-to-theme-workflow.md](rules/figma-to-theme-workflow.md) | ## Figma → Tailwind theme workflow This skill includes a dedicated agent workflow to convert Figma design variables into Tailwind v4 `@theme` CSS files. The workflow is described in `rules/figma-to-theme-workflow.md` and uses the annotated templates in `figma-tokens/` as output targets. **How to trigger it:** paste your Figma CSS variables into chat and ask the agent to generate the Tailwind theme files. Template files in `figma-tokens/`: - `colors.css` — `--color-*` namespace - `typography.css` — `--font-*`, `--text-*`, `--font-weight-*`, `--tracking-*`, `--leading-*` - `spacing.css` — `--spacing` and `--spacing-*` - `radius-shadows.css` — `--radius-*`, `--shadow-*` - `breakpoints.css` — `--breakpoint-*` ## Rule categories by priority | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Utility model & theme | CRITICAL | `core-` | | 2 | Responsive & states | HIGH | `core-` | | 3 | Custom styles | HIGH | `core-` | | 4 | Figma workflow | HIGH | (standalone) | | 5 | Performance | MEDIUM-HIGH | `perf-` | | 6 | Accessibility | MEDIUM | `a11y-` | ## Coverage and maintenance - Coverage map: `rules/_coverage-map.md` - Source: https://tailwindcss.com/docs (v4.2) - Update when Tailwind releases a new major/minor version with breaking `@theme` changes.

Frequently asked questions