converting-css-to-tailwind
Converting CSS to Tailwind
Migrate plain CSS files to Tailwind utility classes applied directly in markup.
Workflow
- Read the CSS file and inventory every rule
- Find the corresponding markup (HTML, JSX, TSX, Vue, Svelte) that references each selector
- Convert each rule using the mapping below
- Delete the CSS rule once all its properties are expressed as utilities
- Remove the CSS file (or import) once it's empty
- Verify the page looks identical — check for visual regressions
Conversion Reference
Layout & Box Model
| CSS | Tailwind |
|---|
More from spencerpauly/awesome-cursor-skills
saving-workspace-context
Automatically persist useful context — research, decisions, learnings, templates — to workspace files so knowledge survives across conversations.
38database-design
Design database schemas — tables, relationships, indexes, constraints, and ORM setup. Covers relational design, normalization, and common patterns.
37reviewing-code
Perform a thorough code review focused on correctness, maintainability, performance, and best practices.
37suggesting-cursor-rules
When the user repeats the same correction or convention multiple times, suggest a Cursor rule to encode it permanently.
35systematic-debugging
Structured debugging methodology — reproduce, isolate, hypothesize, verify. Covers git bisect, binary search, logging, and minimal reproduction.
33auditing-security
Perform a systematic security audit of a codebase, checking for OWASP Top 10 vulnerabilities, secrets exposure, and insecure patterns.
33