transform-to-tailwindcss weekly downloads statistics

🎨 Transform to TailwindCSS

🚀 Effortlessly migrate legacy CSS to TailwindCSS

Automatically transform existing CSS styles into utility-first TailwindCSS classes

English | 简体中文

✨ Why Choose Transform to TailwindCSS?

🎯 Performance First - Reduce bundle size with TailwindCSS utility classes 🔄 Legacy Migration - Seamlessly upgrade old projects to modern TailwindCSS ⚡ Developer Experience - Maintain design system consistency 🛠️ Framework Agnostic - Support for Vue, React, Svelte, Astro and vanilla HTML 📝 Auto Safelist - 🆕 Automatically collect generated class names, never lose any 🔐 Circular Protection - 🆕 Smart protection to prevent infinite build loops 🚀 Build Optimized - 🆕 Smart skip, only regenerate when changes occur

Want to use UnoCSS? Try transformToUnocss!

🚀 Quick Start

Global Installation

🎯 CSS Preprocessor Dependencies

From v0.0.49+, install CSS preprocessors you use in your project:

Why? Using peerDependencies ensures compatibility with your project's preprocessor versions and avoids conflicts.

CLI Usage

🆕 Quick Example: Auto Safelist Generation

Transform your CSS and automatically generate a safelist for TailwindCSS in just 3 steps:

⚠️ For Tailwind CSS v3.x and below users: Run npm run build once before starting development to generate the initial safelist file.

🌈 Usage

Vite

Rollup

Webpack

Vue CLI

Esbuild

🔧 Configuration Options

| Option | Type | Default | Description |

| 🐛 debug | boolean | false | Enable detailed transformation logs | | 📐 isRem | boolean | false | Convert px units to rem | | 🎯 include | FilterPattern | - | Files to process | | 🚫 exclude | FilterPattern | - | Files to ignore | | 📝 collectClasses | boolean | false | New Auto-collect generated classes | | 📂 outputPath | string | './safelist-classes.js' | New Output path for collected classes | | ⚡ skipIfNoChanges | boolean | true | New Skip generation if no changes |

⚠️ Important Notes for Different Tailwind CSS Versions:

• Tailwind CSS v4.x+: Works out of the box with dynamic class generation - Tailwind CSS v3.x and below: Requires initial build step 1. Configure plugin: collectClasses: true 2. Run build: npm run build (generates safelist file) 3. Start dev: npm run dev (uses generated safelist) 4. Repeat step 2 when adding new CSS transformations

🆕 Class Collection Feature

🎯 New Feature: Automatically collect all generated TailwindCSS class names for safelist configuration!

When using dynamic CSS transformations, TailwindCSS might not detect the generated classes during purging. The class collection feature solves this by automatically generating a safelist file containing all transformed classes.

⚠️ Important for Tailwind CSS v3.x and below users: You need to run a build once first to generate the safelist file, then start your dev server for normal behavior. This is because Tailwind CSS v3.x and below require the safelist to be available during the initial compilation process.

📝 Auto-Generate Safelist - Never Lose Classes Again

Generated file (safelist-classes.js):

Key Benefits:

• 🔄 Circular Dependency Protection: Smart detection prevents infinite build loops • ⚡ Performance Optimized: Only regenerates when classes actually change • 🛡️ Build-Safe: Multiple safeguards prevent duplicate generations • 📊 Comprehensive: Collects classes from all transformation processes

⚠️ Workflow for Tailwind CSS v3.x and below:

1. Configure the plugin with collectClasses: true 2. Run npm run build (or your build command) once to generate safelist 3. Start your dev server with npm run dev 4. The generated classes will now be available during development

Other Configuration Options

debug

• Type: boolean • Default: false

Enable debug mode to output detailed debugging logs during the transformation process. This is useful for troubleshooting and understanding the style transformation process.

isRem

• Type: boolean • Default: false

Convert px units to rem units during the transformation process.

include/exclude

• Type: FilterPattern

Filter patterns for including or excluding files during the transformation process.

🎯 Supported Features

✅ File Formats - .html | .tsx | .vue | .astro | .svelte ✅ CSS Preprocessors - Sass, Less, Stylus ✅ Build Tools - Vite, Rollup, Webpack, Vue CLI, ESBuild ✅ IDE Support - VS Code Extension

🔗 Related Projects

• transform-to-tailwindcss-core - Browser-side CSS transformation engine

📈 Before & After Comparison

Before 😤

After 🎉

💖 Support the Project

If this project helps you, please consider giving it a ⭐!

📄 License

MIT © 2024-PRESENT Simon He