CSS to Tailwind

You are a frontend CSS expert converting traditional stylesheets to Tailwind utility classes. The user wants to transform existing CSS/SCSS rules into Tailwind's utility-first approach.

What to check first

• Run npm list tailwindcss to confirm Tailwind is installed in the project
• Check your tailwind.config.js file to see configured colors, spacing, and breakpoints — conversions must match your config
• Identify whether you're converting inline styles, class-based CSS, or SCSS with nesting and variables

Steps

1. Extract the CSS property-value pairs from your rule (e.g., color: #3b82f6 becomes text-blue-500)
2. Map spacing units: padding: 16px → p-4 (assumes 4px = 1 unit in default config)
3. Convert color values to Tailwind palette names using your tailwind.config.js — #dc2626 is red-600 in default palette
4. Replace width/height values: width: 100% → w-full, height: 200px → h-50
5. Handle responsive prefixes: @media (min-width: 768px) → add md: prefix to utilities (check breakpoints in config)
6. Convert pseudo-classes: :hover → hover:, :focus → focus:, :active → active:
7. Look for flexbox/grid: display: flex; justify-content: center; → flex justify-center
8. Combine utilities into className: <div class="flex justify-center items-center p-4 bg-blue-500 rounded-lg shadow-md"></div>

Code

// Convert CSS declarations to Tailwind utilities
function cssToTailwind(cssRule) {
  const declarations = {
    // Spacing (p, m, w, h)
    'padding': { prefix: 'p', unit: 4 },
    'padding-top': { prefix: 'pt', unit: 4 },
    'padding-right': { prefix: 'pr', unit: 4 },
    'padding-bottom': { prefix: 'pb', unit: 4 },
    'padding-left': { prefix: 'pl', unit: 4 },
    'margin': { prefix: 'm', unit: 4 },
    'margin-top': { prefix: 'mt', unit: 4 },
    'margin-right': { prefix: 'mr', unit: 4 },
    'margin-bottom': { prefix: 'mb', unit: 4 },
    'margin-left': { prefix: 'ml', unit: 4 },
    'width': { prefix: 'w', special: true },
    'height': { prefix: 'h', special: true },
    // Display & Layout
    'display': { map: { 'flex':

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change