Global CSS to Tailwind Migration

Convert a large CSS codebase into a utility-first Tailwind design system.

category:modernization
css
tailwind
design-system
workflow
multi-step
0

Prompt

This workflow is designed for teams moving from ad-hoc CSS to a consistent Tailwind-driven design system.

## Steps:

1. Set up Tailwind with a config that encodes your color, spacing, and typography tokens.

2. Audit existing CSS for common layout and spacing patterns.

3. Replace global layout utilities (containers, grids, flex helpers) with Tailwind classes.

4. Migrate component-specific styles into JSX using Tailwind utilities.

5. Use @apply sparingly for complex reusable patterns.

6. Enable and tune content-based purging to remove unused CSS.

7. Document Tailwind patterns in a small internal style guide.