1 votes

Migrate CSS to Tailwind CSS

Convert existing CSS stylesheets to Tailwind utility classes.

modernization
migration
tailwind
css
styling
workflow
multi-step
+1

Prompt

A workflow for migrating from traditional CSS/SCSS to Tailwind CSS utility-first approach.

## Steps:

1. Install Tailwind CSS: npm install -D tailwindcss postcss autoprefixer

2. Initialize Tailwind config: npx tailwindcss init

3. Set up PostCSS configuration and add Tailwind directives to your CSS entry file.

4. Identify components with existing CSS classes.

5. Ask Copilot: 'Convert these CSS styles to Tailwind classes' for each component.

6. Replace class names in JSX/HTML with Tailwind utilities.

7. Extract repeated patterns into @apply directives or component classes if needed.

8. Remove old CSS files once components are fully migrated.

9. Configure theme customization in tailwind.config.js for brand colors/spacing.

10. Run Purge CSS in production to minimize bundle size.