# CSS To Tailwind

> Convert CSS files to Tailwind utility classes

- Skill: `modbender/css-to-tailwind-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add modbender/css-to-tailwind-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/modbender/css-to-tailwind-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: modbender (https://skillmd.com/u/modbender)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/modbender/css-to-tailwind-2

---


# CSS to Tailwind

Got legacy CSS? Convert it to Tailwind classes. Handles complex selectors and media queries.

## Quick Start

```bash
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

```bash
# 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](https://github.com/lxgicstudios/ai-css-to-tailwind)
- Twitter: [@lxgicstudios](https://x.com/lxgicstudios)