Registry / devops / transform-to-tailwindcss

transform-to-tailwindcss

JSON →
library0.0.56jsnpmunverified

Zero-config migration tool that automatically converts legacy CSS to TailwindCSS utility classes. Current stable version is 0.0.56, actively maintained with frequent releases. Supports Vue, React, Svelte, Astro, and vanilla HTML. Key differentiators include automatic safelist generation, circular build protection, and plugin support for Vite, Rollup, Webpack, and Rspack. Requires peer dependencies for Sass, Less, or Stylus preprocessors. Ships TypeScript types and offers CLI and programmatic usage both in Node.js and browser environments.

devops
npm install transform-to-tailwindcss
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · TRANSFORM-TO-TAILW
T
transform-to-tailwindcss
devopsjavascriptv0.0.56
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

vitePluginTransformTotailwindcss
✓ import { vitePluginTransformTotailwindcss } from 'transform-to-tailwindcss'
✗ const vitePluginTransformTotailwindcss = require('transform-to-tailwindcss')
ESM import from package root; also available as named export. CJS require may not work depending on bundler config.
rollupTransformTotailwindcss
✓ import { rollupTransformTotailwindcss } from 'transform-to-tailwindcss'
✗ import rollupTransformTotailwindcss from 'transform-to-tailwindcss'
Named export, not default. Also available via CJS require as property.
webpackTransformTotailwindcss
✓ import { webpackTransformTotailwindcss } from 'transform-to-tailwindcss'
Named export from package root; also available via rspackTransformTotailwindcss for Rspack.

Configures Vite plugin with auto safelist collection and output file generation.

import { defineConfig } from 'vite'; import { vitePluginTransformTotailwindcss } from 'transform-to-tailwindcss'; export default defineConfig({ plugins: [ vitePluginTransformTotailwindcss({ collectClasses: true, outputPath: './safelist-classes.js', }), ], });
Debug
Known issues
breakingSince v0.0.49, CSS preprocessors (sass, less, stylus) are no longer bundled; they must be installed as peer dependencies.
fix
Run npm install sass less less-plugin-module-resolver stylus to add missing preprocessors.
affects: >=0.0.49
gotchaFor Tailwind CSS v3.x and below, an initial build is required to generate the safelist before starting development.
fix
Run npm run build once before starting the dev server to generate the safelist file.
affects: >=0.0.0
gotchaThe plugin may not work with other CSS-in-JS solutions or preprocessor plugins that modify styles at build time; order of plugins matters.
fix
Ensure this plugin runs before any CSS processing plugins in your build tool configuration.
affects: >=0.0.0
deprecatedThe older global CLI usage (totailwindcss) is deprecated; prefer using the build tool plugins.
fix
Use the Vite, Rollup, Webpack, or Rspack plugin instead of the CLI for better integration.
affects: >=0.0.0
gotchaCircular protection may skip transformations if it detects a loop; ensure your config does not create cycles.
fix
Review your plugin order and options to avoid infinite build loops.
affects: >=0.0.0
Errors
Common errors & fixes
Cannot find module 'sass'
Missing required peer dependency for Sass/SCSS support since v0.0.49
fix
Install sass: npm install sass
Error: transform plugin not found
Importing incorrect plugin name or using wrong bundler export
fix
Use the correct named export for your bundler (e.g., vitePluginTransformTotailwindcss for Vite)
TypeError: Cannot read properties of undefined (reading 'css')
Plugin running on non-CSS files or missing file extension filter
fix
Ensure plugin is only applied to CSS/SCSS/Less/Stylus files, or set appropriate include/exclude options
Module not found: Error: Can't resolve 'transform-to-tailwindcss'
Package not installed or incorrectly imported in a CJS environment
fix
Install the package: npm install transform-to-tailwindcss. For CJS, use require('transform-to-tailwindcss') with destructuring.
Upgrade
Version history
0.0.56latest on npm
Audit
Dependencies
sassoptionalRequired for Sass/SCSS support since v0.0.49
lessoptionalRequired for Less support since v0.0.49
less-plugin-module-resolveroptionalRequired for Less support since v0.0.49
stylusoptionalRequired for Stylus support since v0.0.49
Agent activity
10 hits · last 30 days
node
10
Resources
githubhttps://github.com/Simon-He95/transformToTailwindcss ↗
packagetransform-to-tailwindcss ↗
homepagehttps://github.com/Simon-He95/transformToTailwindcss#readme ↗
transform-to-tailwindcss — npm install transform-to-tailwindcss · libregistry