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 agentmods add skills/pledgeandgrow/pledge-skills/tailwindcssnpx skills add pledgeandgrow/pledge-skills --skill tailwindcssgit clone --depth 1 https://github.com/pledgeandgrow/pledge-skillsWrote 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/pledgeandgrow/pledge-skills/tailwindcss)<a href="https://agentmods.dev/skills/pledgeandgrow/pledge-skills/tailwindcss"><img src="https://agentmods.dev/badge/skills/pledgeandgrow/pledge-skills/tailwindcss.svg" alt="Measured on agentmods" height="20"></a>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.00070 | $0.01392 |
| Opus 5 | $0.00035 | $0.00696 |
| Sonnet 5 | $0.00014 | $0.00278 |
| Haiku 4.5 | $0.00007 | $0.00139 |
Grade A, and why
tailwindcss-docs 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 2d 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 — 175 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Tailwind CSS Expert (v4.x)
Official Documentation: https://tailwindcss.com/docs
Quick Reference
| Topic | File |
|---|---|
| Installation, setup, configuration | installation-setup.md |
| Core concepts: utility-first, states, arbitrary values | core-concepts.md |
| Layout: display, position, z-index, overflow | layout.md |
| Flexbox: direction, wrap, justify, align, grow, shrink | flexbox.md |
| Grid: template, columns, rows, gap, span, auto-flow | grid.md |
| Spacing: margin, padding, gap, space-between | spacing.md |
| Sizing: width, height, min/max, aspect ratio | sizing.md |
| Colors: palette, opacity, dark mode, CSS variables | colors.md |
| Typography: font size, weight, family, line-height, color | typography.md |
| Backgrounds: color, gradient, image, size, position | backgrounds.md |
| Borders: radius, width, color, style, outline, ring | borders.md |
| Effects: shadow, opacity, blend modes, filters | effects.md |
| Transitions & Animation: duration, easing, keyframes | transitions-animation.md |
| Transforms: scale, rotate, translate, skew, origin | transforms.md |
| Interactivity: cursor, pointer-events, user-select, scroll | interactivity.md |
| Responsive design: breakpoints, container queries | responsive-design.md |
| Customization: theme, plugins, @theme, CSS-first config | customization.md |
Tailwind CSS v4 Key Changes
Tailwind CSS v4 is a CSS-first framework:
- No JavaScript config — configuration is done in CSS via
@theme - No
tailwind.config.js— use@import "tailwindcss"and@themeblocks in CSS - Zero runtime — pure CSS output, no JavaScript needed in production
- Vite plugin — built-in integration with Vite for instant HMR
- PostCSS plugin — traditional build pipeline support
/* v4: CSS-first configuration */
@import "tailwindcss";
@theme {
--color-brand: #0ea5e9;
--font-sans: "Inter", system-ui, sans-serif;
--spacing-*: initial;
--spacing-xs: 0.5rem;
}
What ships with it
16 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.
- backgrounds.md 5.0 KB
- borders.md 6.0 KB
- colors.md 4.9 KB
- core-concepts.md 6.3 KB
- customization.md 7.3 KB
- effects.md 5.9 KB
- flexbox.md 5.1 KB
- grid.md 6.1 KB
- interactivity.md 6.7 KB
- layout.md 6.4 KB
- responsive-design.md 5.8 KB
- sizing.md 6.4 KB
- spacing.md 4.6 KB
- transforms.md 4.6 KB
- transitions-animation.md 5.1 KB
- typography.md 10 KB
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.
- 2d ago First seen · 175 lines · 70 tokens per session scan A 16a8e5dab31b
tailwindcss-docs is a skill published in the GitHub repository pledgeandgrow/pledge-skills (10 stars, last pushed 1mo ago), licensed MIT. It adds 70 tokens to every session and 1,392 once invoked, about $0.0003 per session on Opus 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-09-03.
Other skills, from other repositories
preline-mcp
Add, integrate, or build Preline UI components and blocks into HTML files via the Preline MCP server. Use when the user mentions "preline", says "/preline", asks to add a UI component, or requests a Preline block (a ready-made page section) using Preline UI.
preline-theme-generator
Generate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, match a brand color, translate a mood into a theme, generate light and dark theme CSS, preview theme output without writing files, or review and fix generated…
Responsive Layout Reviewer
Reviews HTML/CSS or component code for responsive design issues across mobile, tablet, and desktop breakpoints.
frontend-design
Use this skill when specifying, designing, or documenting UI components, layouts, and design systems for frontend implementation. Trigger phrases: 'design this UI component', 'create a responsive layout', 'spec the CSS for', 'design system for'. Do NOT use for backend development, server-side logic, data engineering…
tw-easing-gradients
Replace Tailwind CSS linear gradients with smooth eased gradients using tw-easing-gradients. Use when upgrading bg-gradient-to-, creating fading backgrounds, or smooth color transitions.
responsive-storefront
Build a mobile-first storefront with thumb-friendly navigation, sticky add-to-cart buttons, and touch-optimized components for high mobile conversion.