New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Converting CSS To Tailwind

by spencerpauly in spencerpauly/awesome-cursor-skills

Convert plain CSS stylesheets to Tailwind CSS utility classes.

CC0-1.0Auto-check passedFrontend & Design

Install Converting CSS To Tailwind

skills CLI
$ npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install spencerpauly/awesome-cursor-skills converting-css-to-tailwind --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/resources/converting-css-to-tailwind .claude/skills/converting-css-to-tailwind && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
converting-css-to-tailwind
GitHub stars
842
Token cost
~916 tokens
SKILL.md length
345 words
Files
1
Skills in repo
57
Repo updated
First seen
Licence
CC0-1.0

At a glance

Convert plain CSS stylesheets to Tailwind CSS utility classes.

  • Works in 6 steps: Read the CSS file and inventory every rule → Find the corresponding markup (HTML,… → Convert each rule using the mapping below → …
  • Tasks that involve CSS and styling
  • SKILL.md covers Workflow, Conversion Reference, Handling Remaining CSS and Rules
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Converting CSS To Tailwind is an agent skill from spencerpauly/awesome-cursor-skills. Convert plain CSS stylesheets to Tailwind CSS utility classes. Handles selectors, media queries, pseudo-classes, custom properties, and animations.

Its SKILL.md is about 920 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering CSS and styling and Responsive design. It works with Tailwind CSS. The repository describes itself as: A curated list of awesome skills for Cursor. The licence is CC0-1.0.

When your agent uses it

  • Tasks that involve CSS and styling
  • Tasks that involve Responsive design

Example prompts

  • “/converting-css-to-tailwind”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Read the CSS file and inventory every rule
  2. Find the corresponding markup (HTML, JSX, TSX, Vue, Svelte) that references each selector
  3. Convert each rule using the mapping below
  4. Delete the CSS rule once all its properties are expressed as utilities
  5. Remove the CSS file (or import) once it's empty
  6. Verify the page looks identical — check for visual regressions

What it can do on your machine

Read from SKILL.md and the folder at commit 99cd265. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Converting CSS To Tailwind loads about 916 tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 345 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~44
When it runs · the whole SKILL.md, loaded when a task matches
~916

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from spencerpauly/awesome-cursor-skills at commit 99cd265, republished under its CC0-1.0 licence (© spencerpauly). 345 words, ~916 tokens.

Download SKILL.mdSave it as .claude/skills/converting-css-to-tailwind/SKILL.md (or your agent's skills folder).
name
converting-css-to-tailwind
description
Convert plain CSS stylesheets to Tailwind CSS utility classes. Handles selectors, media queries, pseudo-classes, custom properties, and animations.
user-invocable
true

Converting CSS to Tailwind

Migrate plain CSS files to Tailwind utility classes applied directly in markup.

Workflow

  1. Read the CSS file and inventory every rule
  2. Find the corresponding markup (HTML, JSX, TSX, Vue, Svelte) that references each selector
  3. Convert each rule using the mapping below
  4. Delete the CSS rule once all its properties are expressed as utilities
  5. Remove the CSS file (or import) once it's empty
  6. Verify the page looks identical — check for visual regressions

Conversion Reference

Layout & Box Model
CSSTailwind
display: flexflex
display: gridgrid
display: nonehidden
position: relativerelative
position: absoluteabsolute
justify-content: centerjustify-center
align-items: centeritems-center
gap: 16pxgap-4
width: 100%w-full
max-width: 768pxmax-w-3xl
margin: 0 automx-auto
padding: 16pxp-4
overflow: hiddenoverflow-hidden
Typography
CSSTailwind
font-size: 14pxtext-sm
font-weight: 700font-bold
line-height: 1.5leading-normal
text-align: centertext-center
text-transform: uppercaseuppercase
color: #333text-[#333] or a theme color
letter-spacing: 0.05emtracking-wide
Backgrounds & Borders
CSSTailwind
background-color: #f5f5f5bg-[#f5f5f5] or bg-neutral-100
border: 1px solid #e5e7ebborder border-gray-200
border-radius: 8pxrounded-lg
box-shadow: 0 1px 3px ...shadow-sm
Responsive — Media Queries
css
@media (min-width: 768px) { .card { flex-direction: row; } }

→ <div class="flex-col md:flex-row">

Map breakpoints: sm: (640), md: (768), lg: (1024), xl: (1280), 2xl: (1536)

Pseudo-classes & States
css
.btn:hover { background-color: #1d4ed8; }

→ <button class="hover:bg-blue-700">

Prefixes: hover:, focus:, active:, disabled:, first:, last:, odd:, even:, group-hover:, peer-checked:

Animations & Transitions
css
transition: all 0.2s ease-in-out;

→ transition-all duration-200 ease-in-out

css
@keyframes spin { ... }
animation: spin 1s linear infinite;

→ animate-spin (built-in) or define in tailwind.config

Custom Properties / Arbitrary Values

For anything without a direct utility, use arbitrary values:

  • w-[calc(100%-2rem)]
  • grid-cols-[200px_1fr_1fr]
  • text-[clamp(1rem,2vw,1.5rem)]

Handling Remaining CSS

Some things can't be expressed purely as utilities:

  • Complex selectors (.parent > .child + .sibling) — restructure the markup or use @apply as a last resort
  • @font-face — keep in a global CSS file or globals.css
  • Complex @keyframes — define in tailwind.config.ts under theme.extend.keyframes
  • CSS variables — migrate to Tailwind theme values in tailwind.config.ts

Rules

  • Prefer semantic Tailwind classes (bg-primary) over arbitrary hex values when a theme exists
  • Don't use @apply to recreate the same CSS you're migrating away from — that defeats the purpose
  • Group related utilities logically: layout → spacing → typography → colors → effects
  • If a component has 10+ utilities, consider extracting a reusable component rather than a CSS class

© spencerpauly, CC0-1.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in resources/converting-css-to-tailwind of spencerpauly/awesome-cursor-skills.

Open the folder on GitHubat commit 99cd265

Compare with similar skills

Converting CSS To Tailwind next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Converting CSS To Tailwind compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Converting CSS To Tailwind this skillspencerpauly/awesome-cursor-skills842—~916Automated safety check: PassCC0-1.0
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Tailwind CSS Patternsever-works/ever-works1583 repos~1.6kAutomated safety check: NotesAGPL-3.0
Good CSSvojtaholik/good-css120—~1.2kAutomated safety check: PassMIT
Using Ouds Web Version Major MinorOrange-OpenSource/Orange-Boosted-Bootstrap222—~4.2kAutomated safety check: PassMIT
Tailwindcss Developmentcachethq/core230—~1.1kAutomated safety check: PassMIT

Similar skills

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Tailwind CSS Patterns

    ever-works/ever-works

    Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices.

    158 GitHub starsUsed in 3 repos~1.6k tokens
    Frontend & DesignAuto-check: notes

  • Good CSS

    vojtaholik/good-css

    Modern CSS techniques that replace breakpoint ladders, wrapper elements and scripts.

    120 GitHub stars~1.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Using Ouds Web Version Major Minor

    Orange-OpenSource/Orange-Boosted-Bootstrap

    Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces.

    222 GitHub stars~4.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    cachethq/core

    A skill your agent uses for Cachet Tailwind CSS and UI styling: Blade utility classes, public status-page components, Filament dashboard theme work, responsive layout, dark mode, spacing…

    230 GitHub stars~1.1k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    OpenLitterMap/openlittermap-web

    Styles applications using Tailwind CSS v3 utilities. An agent skill from OpenLitterMap/openlittermap-web.

    134 GitHub stars~713 tokensUpdated 24 days ago
    Frontend & DesignAuto-check passed

More from spencerpauly/awesome-cursor-skills

All 57 skills in this repo

  • Babysitting PR

    spencerpauly/awesome-cursor-skills

    Monitor a pull request for CI failures, review comments, and merge conflicts — then fix them automatically.

    842 GitHub stars~930 tokensUpdated 2 mo ago
    Auto-check passed

  • Best Of N Solving

    spencerpauly/awesome-cursor-skills

    Solve a hard problem by trying multiple approaches in parallel using isolated git worktrees.

    842 GitHub stars~698 tokensUpdated 2 mo ago
    Auto-check passed

  • Grinding Until Pass

    spencerpauly/awesome-cursor-skills

    Keep iterating on code changes until the tests pass, the build succeeds, or linting is clean.

    842 GitHub stars~796 tokensUpdated 2 mo ago
    Auto-check passed

  • Parallel CI Triage

    spencerpauly/awesome-cursor-skills

    When GitHub Actions fails, fetch failing job logs and assign each failing job to a separate subagent that fixes its slice of the problem in parallel.

    842 GitHub stars~793 tokensUpdated 2 mo ago
    Auto-check passed

  • Parallel Exploring

    spencerpauly/awesome-cursor-skills

    Explore a large codebase in parallel by launching multiple explore subagents that each investigate a different area simultaneously.

    842 GitHub stars~787 tokensUpdated 2 mo ago
    Auto-check: notes

  • Profiling Performance

    spencerpauly/awesome-cursor-skills

    Profile a running web application's CPU performance using Cursor's built-in browser profiler.

    842 GitHub stars~686 tokensUpdated 2 mo ago
    Auto-check passed

Works with

Categories

Questions about Converting CSS To Tailwind

What does Converting CSS To Tailwind do?

Convert plain CSS stylesheets to Tailwind CSS utility classes. Converting CSS To Tailwind is an agent skill from spencerpauly/awesome-cursor-skills. Convert plain CSS stylesheets to Tailwind CSS utility classes.

When should I use Converting CSS To Tailwind?

Converting CSS To Tailwind fits situations like: tasks that involve CSS and styling; tasks that involve Responsive design.

How do I install Converting CSS To Tailwind in Claude Code?

Run `npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind -a claude-code`. Or copy the skill folder (resources/converting-css-to-tailwind in spencerpauly/awesome-cursor-skills) into .claude/skills/converting-css-to-tailwind in your project. Claude Code loads it when a task matches its description.

How do I install Converting CSS To Tailwind in Codex?

Run `npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind -a codex`. Or copy the skill folder (resources/converting-css-to-tailwind in spencerpauly/awesome-cursor-skills) into .agents/skills/converting-css-to-tailwind in your project. Codex loads it when a task matches its description.

Can I use Converting CSS To Tailwind in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add spencerpauly/awesome-cursor-skills --skill converting-css-to-tailwind -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/converting-css-to-tailwind, .gemini/skills/converting-css-to-tailwind, .github/skills/converting-css-to-tailwind and .opencode/skills/converting-css-to-tailwind in your project.

What does Converting CSS To Tailwind need to run?

SKILL.md names no scripts, command-line tools or credentials: Converting CSS To Tailwind is instructions for the agent only.

Does Converting CSS To Tailwind access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Converting CSS To Tailwind safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Converting CSS To Tailwind use?

Converting CSS To Tailwind is published under the CC0-1.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Converting CSS To Tailwind use?

About 916 tokens (SKILL.md is roughly 3.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Converting CSS To Tailwind?

Skills that share tags, products or a category with Converting CSS To Tailwind: UI Styling (Ohh-889/skyroc, 795 stars), Tailwind CSS Patterns (ever-works/ever-works, 158 stars), Good CSS (vojtaholik/good-css, 120 stars) and Using Ouds Web Version Major Minor (Orange-OpenSource/Orange-Boosted-Bootstrap, 222 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Converting CSS To Tailwind?

spencerpauly (a GitHub user) maintains it in spencerpauly/awesome-cursor-skills, which has 842 GitHub stars. The repository holds 57 skills in this directory. The repository was last updated on August 2, 2026.

Source: spencerpauly/awesome-cursor-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.