css-to-tailwind
Convert CSS files to Tailwind utility classes
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/lxgicstudios/ai-css-to-tailwindCSS to Tailwind
Got legacy CSS? Convert it to Tailwind classes. Handles complex selectors and media queries.
Quick Start
npx ai-css-to-tailwind ./src/styles/button.css
What It Does
- Converts CSS rules to Tailwind utilities
- Handles responsive breakpoints
- Converts custom properties to theme values
- Preserves complex hover/focus states
Usage Examples
# Convert a CSS file
npx ai-css-to-tailwind ./styles/header.css
# Convert and update component
npx ai-css-to-tailwind ./styles/card.css --update ./components/Card.tsx
# Batch convert
npx ai-css-to-tailwind ./styles/*.css
What It Handles
- Media queries → responsive prefixes
- Pseudo-classes → state variants
- CSS variables → theme tokens
- Complex selectors → component patterns
Requirements
Node.js 18+. OPENAI_API_KEY required.
License
MIT. Free forever.
Built by LXGIC Studios
- GitHub: github.com/lxgicstudios/ai-css-to-tailwind
- Twitter: @lxgicstudios
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-lxgicstudios-ai-css-to-tailwind": {
"enabled": true,
"auto_update": true
}
}
}Related Skills
script-gen
Generate package.json scripts with AI. Use when setting up npm scripts.
email-template-gen
Generate responsive email templates. Use when building transactional emails.
branch-namer
Generate descriptive git branch names from plain English. Use when you need a branch name that follows conventions.
cloudflare-gen
Generate Cloudflare Workers configuration and code. Use when building on the edge.
adr-writer
Generate Architecture Decision Records with AI. Use when documenting technical decisions.