Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →velcrafting/tailwindcss
This skill should be used when the user asks to "style with Tailwind", "add CSS", "configure theme", "use @theme", "add custom colors", "implement dark mode", "use container queries", "add responsive design", "use OKLCH colors", or discusses styling, theming, or visual design. Always use the latest Tailwind CSS version and modern patterns.
Passed 18 of 23 test cases with the skill, and 12 of 23 without it.
and 10 more in the full report
8 fixed10 passed either way3 still failing2 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.
Our layout requires non-standard spacing units '--spacing-18' (4.5rem) and '--spacing-128' (32rem). Provide the CSS declaration block establishing these design system spacing tokens.
| Checked | Without skill | With skill |
|---|---|---|
| --spacing-18 | Passed | Passed |
| Declares custom spacing tokens as CSS custom properties inside a @theme block. | Missed | Passed |
The instructions your model reads when the skill loads.
This skill provides guidance for styling applications with Tailwind CSS, focusing on always using the latest version and modern patterns.
Philosophy: Use CSS-first configuration with
@theme. Use OKLCH colors for perceptual uniformity. Prefer@containerqueries over media queries when appropriate.
| Feature | Modern Approach | Legacy (Avoid) |
|---|---|---|
| Configuration | CSS @theme directive | tailwind.config.js |
| Colors | OKLCH color space | RGB/HSL colors |
| Container queries | @container | Media queries only |
| Content detection | Automatic | Manual content: [] config |
| PostCSS plugin | @tailwindcss/postcss | tailwindcss package |
npm install tailwindcss @tailwindcss/postcss postcss
// postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {}
}
}
/* app/globals.css */
@import "tailwindcss";
test cases passed, vs 12 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.