Tailwind

Skill MAHDTech/agent-skills/skills/tooling/tailwind

Use when writing Tailwind CSS utility classes, compiling Tailwind bundles, or configuring Tailwind CSS v4 CSS-first themes and variables.From its SKILL.md

Install

npx -y skills add MAHDTech/agent-skills --skill tailwind

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.7 KB, 376 tokens by cl100k_base, as published. Nobody here has run it

Tailwind CSS v4

Guidelines for compiling stylesheet bundles and styling components using Tailwind CSS (utility-first styling framework). Consult the local Tailwind CSS v4 Docs for full reference.

Tailwind CSS v4 Key Rules

Tailwind CSS v4 introduces a completely redesigned compilation engine and configuration syntax:

CSS-First Configuration: Tailwind v4 abandons tailwind.config.js in favor of standard CSS syntax. Configure custom theme variables (colors, fonts, screens) inside @theme directive blocks directly in your CSS:
```
@import "tailwindcss";

@theme {
  --color-primary: #1e3a8a;
  --color-surface: #f3f4f6;
  --font-sans: "Inter", sans-serif;
}
```
Standard Imports: Use @import "tailwindcss"; at the top of your stylesheet instead of old directives like @tailwind base; @tailwind components; @tailwind utilities;.

Build & Compilation Commands

Use the Tailwind v4 CLI to compile utility classes:

Build once: tailwindcss -i <input.css> -o <output.css>
Watch mode: tailwindcss -i <input.css> -o <output.css> --watch
Minify output: tailwindcss -i <input.css> -o <output.css> --minify

Completion Criteria

The styling task is complete when:

The output CSS stylesheet compiles successfully without CLI error logs.
Custom theme variables are correctly defined under @theme and reflect properly on elements.
Utility styles are purged correctly and yield a responsive, optimized output bundle.

What ships with it: 1 file

2.1 KB alongside SKILL.md

resources/

auto/docs.md2.1 KB