Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add iliaal/whetstone --skill tailwind-cssgit clone --depth 1 https://github.com/iliaal/whetstoneWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/iliaal/whetstone/tailwind-css)<a href="https://agentmods.dev/skills/iliaal/whetstone/tailwind-css"><img src="https://agentmods.dev/badge/skills/iliaal/whetstone/tailwind-css/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/iliaal/whetstone/tailwind-css"><img src="https://agentmods.dev/badge/skills/iliaal/whetstone/tailwind-css.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00061 | $0.01533 |
| Opus 5.5 | $0.00024 | $0.00613 |
| Sonnet 5.5 | $0.00012 | $0.00307 |
| Haiku 4.5 | $0.00006 | $0.00153 |
Grade A, and why
tailwind-css scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 128 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Tailwind CSS v4
CSS-First Configuration
v4 eliminates tailwind.config.ts. All configuration lives in CSS.
| Directive | Purpose |
|---|---|
@import "tailwindcss" |
Entry point (replaces @tailwind base/components/utilities) |
@theme { } |
Define/extend design tokens — auto-generates utility classes |
@theme inline { } |
Map CSS variables to Tailwind utilities without generating new vars |
@theme static { } |
Define tokens that don't generate utilities |
@utility name { } |
Create custom utilities (replaces @layer components + @apply) |
@custom-variant name (selector) |
Define custom variants |
@import "tailwindcss";
@theme {
--color-brand: oklch(0.72 0.11 178);
--font-display: "Inter", sans-serif;
--animate-fade-in: fade-in 0.2s ease-out;
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
}
@custom-variant dark (&:where(.dark, .dark *));
Tokens defined with @theme become utilities automatically: --color-brand produces bg-brand, text-brand, border-brand.
v3 to v4 Breaking Changes
| v3 | v4 | Notes |
|---|---|---|
tailwind.config.ts |
@theme in CSS |
Delete config file |
@tailwind base/components/utilities |
@import "tailwindcss" |
Single import |
darkMode: "class" |
@custom-variant dark (...) |
CSS-only |
bg-gradient-to-r |
bg-linear-to-r |
Also: bg-radial, bg-conic |
bg-opacity-60 |
bg-red-500/60 |
All *-opacity-* removed |
rounded-md (6px) |
rounded (6px) |
Radius scale shifted down |
min-h-screen |
min-h-dvh |
dvh handles mobile browser chrome |
w-6 h-6 |
size-6 |
Size shorthand for equal w/h |
space-x-4 |
gap-4 |
Gap handles flex/grid wrapping correctly |
text-base leading-7 |
text-base/7 |
Inline line-height modifier |
require("tailwindcss-animate") |
tw-animate-css |
CSS-only animations |
forwardRef |
ref as prop |
React 19 change (not Tailwind, but co-occurs) |
Coding Rules
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 128 lines · 61 tokens per session scan A 5ce8933997ff
tailwind-css is a skill published in the GitHub repository iliaal/whetstone (35 stars, last pushed yesterday), licensed MIT. It adds 61 tokens to every session and 1,533 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
generic-static-code-reviewer
Review static site code for bugs, security issues, performance problems, accessibility gaps, and CLAUDE.md compliance. Enforces pure HTML/CSS/JS standards, minimal page weight, mobile-first design. Use when completing features, before commits, or reviewing changes.
pr-review
Comprehensive PR review across six dimensions — cost impact, environment drift, ownership gaps, SOC 2 compliance, deprecated API / version hygiene, and rollback feasibility. Each mode inspects the diff and current file state, reports findings with severity, and recommends concrete fixes. Use when preparing a PR for…
code-review
Review pull requests to this repo (a Claude Code / Copilot / Cursor platform-engineering skill plugin) for technical accuracy, security posture, structural consistency with existing domains, and completeness. Use this for any PR touching commands/, references/, examples/, skills/platform-skills/SKILL.md, or the plugin…
frontend-design
Use when user asks to build a web component, page, or application, or when the task involves frontend design, HTML/CSS generation, or UI layout. Applies specific rules for typography, OKLCH color, layout, motion, interaction, and UX writing to produce distinctive, production-grade interfaces that avoid generic AI…
rubber-ducky
Use when you've planned a non-trivial change and are about to implement it, finished a complex or multi-file piece of work, just wrote tests, or are stuck on repeated failures or unexpected results — and any time the user says "rubber duck this", "rubber ducky", "get a second opinion", "sanity-check my plan", "poke…
superreview
Review a change set or explicit project scope for intent, correctness, safety, reuse, and maintainability; independently validate findings and produce one report without applying fixes.