Guidelines for using Tailwind CSS, a utility-based CSS framework, to build consistent and responsive web interfaces. They cover setup, layout, colors, components, responsive behavior, and dark mode.

Use them when configuring Tailwind, styling components, building layouts with Flexbox or Grid, defining responsive states, handling colors and contrast, and adding dark mode.

They help keep interface styling organized and consistent instead of letting each component use unrelated design choices.

tailwind — Cursor rule for coding agents by paulpham157: Guidelines for using Tailwind CSS, a utility-based CSS framework…

Install

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.

agentmods

npx agentmods add rules/paulpham157/paul-s-cursor-rules/tailwind

Clone the repo

git clone --depth 1 https://github.com/paulpham157/paul-s-cursor-rules

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/rules/paulpham157/paul-s-cursor-rules/tailwind.svg)](https://agentmods.dev/rules/paulpham157/paul-s-cursor-rules/tailwind)

Your own site

<a href="https://agentmods.dev/rules/paulpham157/paul-s-cursor-rules/tailwind"><img src="https://agentmods.dev/badge/rules/paulpham157/paul-s-cursor-rules/tailwind.svg" alt="Measured on agentmods" height="20"></a>

Per session 421 This file is loaded in full into every session.

When invoked 421 The same file — it is already loaded in full.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

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	$0.00421	$0.00421
Opus 5	$0.00211	$0.00211
Sonnet 5	$0.00084	$0.00084
Haiku 4.5	$0.00042	$0.00042

Measured 4d ago against content hash 0c232b42e605, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

tailwind 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 4d 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.

Origin

Copies of this mod

4 near-identical copies found in the catalogue:

tailwind — 100% identical, 0 lines differ
tailwind — 100% identical, 0 lines differ
tailwind — 100% identical, 0 lines differ
tailwind — 97% identical, 3 lines differ

1/framework_rules/rules-new/tailwind.mdc · 78 lines

What it actually says

Tailwind CSS Best Practices

Project Setup

Use proper Tailwind configuration
Configure theme extension properly
Set up proper purge configuration
Use proper plugin integration
Configure custom spacing and breakpoints
Set up proper color palette

Component Styling

Use utility classes over custom CSS
Group related utilities with @apply when needed
Use proper responsive design utilities
Implement dark mode properly
Use proper state variants
Keep component styles consistent

Layout

Use Flexbox and Grid utilities effectively
Implement proper spacing system
Use container queries when needed
Implement proper responsive breakpoints
Use proper padding and margin utilities
Implement proper alignment utilities

Typography

Use proper font size utilities
Implement proper line height
Use proper font weight utilities
Configure custom fonts properly
Use proper text alignment
Implement proper text decoration

Colors

Use semantic color naming
Implement proper color contrast
Use opacity utilities effectively
Configure custom colors properly
Use proper gradient utilities
Implement proper hover states

Components

Use shadcn/ui components when available
Extend components properly
Keep component variants consistent
Implement proper animations
Use proper transition utilities
Keep accessibility in mind

Responsive Design

Use mobile-first approach
Implement proper breakpoints
Use container queries effectively
Handle different screen sizes properly
Implement proper responsive typography
Use proper responsive spacing

Performance

Use proper purge configuration
Minimize custom CSS
Use proper caching strategies
Implement proper code splitting
Optimize for production
Monitor bundle size

Best Practices

Follow naming conventions
Keep styles organized
Use proper documentation
Implement proper testing
Follow accessibility guidelines
Use proper version control

Changes

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.

4d ago First seen · 78 lines · 421 tokens per session scan A 0c232b42e605

Subscribe to this mod's changes

tailwind is a cursor rule published in the GitHub repository paulpham157/paul-s-cursor-rules (27 stars, last pushed 1y ago), licensed MIT. It adds 421 tokens to every session, about $0.0021 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-08-30.

Frontend ai cursor cursorrules

tailwind