css-to-tailwind

CSS to Tailwind Converter

Migrating to Tailwind means rewriting hundreds of CSS rules as utility classes. Nobody wants to do that by hand. This tool reads your CSS files and converts them to equivalent Tailwind classes. It handles the tedious conversion so you can focus on the tricky edge cases.

One command. Zero config. Just works.

Quick Start

npx ai-css-to-tailwind styles.css

What It Does

• Reads CSS files and converts rules to Tailwind utility classes
• Handles common properties like padding, margin, colors, typography, and flexbox
• Preserves your class structure so you can map old classes to new utilities
• Handles media queries by converting to Tailwind responsive prefixes
• Outputs a mapping file showing old CSS to new Tailwind equivalents

Usage Examples

npx ai-css-to-tailwind styles.css
npx ai-css-to-tailwind src/styles/
npx ai-css-to-tailwind "src/**/*.css"

Best Practices

• Convert one file at a time - Easier to verify the output
• Check custom values - Tailwind has specific scales. Custom pixel values might need theme config updates.
• Keep your old CSS as backup - Don't delete until you've verified everything works

When to Use This

• Migrating an existing project to Tailwind
• Converting a component library from CSS to utility classes
• Learning what Tailwind classes correspond to your CSS

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

• GitHub: https://github.com/LXGIC-Studios
• Twitter: https://x.com/lxgicstudios
• Substack: https://lxgicstudios.substack.com
• Website: https://lxgic.dev

Requirements

No install needed. Just run with npx. Node.js 18+ recommended.

How It Works

Parses your CSS files and maps each property-value pair to the closest Tailwind utility class. AI handles ambiguous conversions and custom values that don't have direct Tailwind equivalents.

License

MIT. Free forever. Use it however you want.