Registry / devops / transform-to-tailwindcss-core

transform-to-tailwindcss-core

library0.0.43jsnpmunverified

A lightweight, zero-dependency library (v0.0.43) that converts CSS style strings or objects into Tailwind CSS utility classes, primarily used for migrating legacy styles to Tailwind. Supports bidirectional conversion, responsive breakpoints, debug mode, and optional Tailwind v4 canonical output. Unlike similar tools (e.g., tailwindcss-migration), it works in both Node.js (>=14) and browser environments, ships TypeScript types, and is actively maintained on GitHub. It outputs unconverted styles as a separate array, enabling incremental adoption.

devops

npm install transform-to-tailwindcss-core

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · TRANSFORM-TO-TAILW

transform-to-tailwindcss-core

devopsjavascriptv0.0.43

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.

transformStyleToTailwindcss

✓ import { transformStyleToTailwindcss } from 'transform-to-tailwindcss-core'

✗ const transformStyleToTailwindcss = require('transform-to-tailwindcss-core').transformStyleToTailwindcss

Both ESM and CJS are supported; CJS users can destructure from default import.

toTailwindcss

✓ import { toTailwindcss } from 'transform-to-tailwindcss-core'

✗ import toTailwindcss from 'transform-to-tailwindcss-core'

toTailwindcss is a named export, not a default export.

default export

✓ import * as transform from 'transform-to-tailwindcss-core'

✗ import transform from 'transform-to-tailwindcss-core'

No default export exists; use namespace import or named imports.

Demonstrates importing the main function, converting a CSS string to Tailwind classes, enabling rem conversion, and using debug with v4 canonical mode.

import { transformStyleToTailwindcss } from 'transform-to-tailwindcss-core'; const cssStyles = 'color: red; font-size: 16px; margin: 10px'; const [classes, unconverted] = transformStyleToTailwindcss(cssStyles); console.log(classes); // "text-[red] text-[16px] m-[10px]" console.log(unconverted); // [] // With rem conversion const [remClasses, remUnconverted] = transformStyleToTailwindcss('padding: 8px; background-color: #3b82f6', true); console.log(remClasses); // "p-[0.5rem] bg-[#3b82f6]" // With debug mode and v4 canonical output const [v4Classes, v4Unconverted] = transformStyleToTailwindcss('aspect-ratio: 1 / 1;', false, true, true); console.log(v4Classes); // "aspect-square"

Debug

Known issues

gotchaThe `transformStyleToTailwindcss` function returns a tuple: [classesString, unconvertedArray]. Unconverted properties are returned in an array, not logged.

fix

Always destructure both elements: const [classes, unconverted] = transformStyleToTailwindcss(...);

affects: >=0.0.1

gotchaWhen `isV4` is true, the output may change between minor versions as the library updates its canonical class mapping.

fix

Pin to an exact version if deterministic output is required.

affects: >=0.0.43

gotchaPixel values are converted to arbitrary values (e.g., `text-[16px]`) by default; enable `isRem` to get rem-based classes like `text-[1rem]`.

fix

Pass `true` for the `isRem` parameter if rem units are desired.

affects: >=0.0.1

deprecatedThe `debug` parameter is deprecated in v0.0.43 in favor of a future dedicated logging system.

fix

Avoid reliance on debug logs; they may be removed or changed.

affects: =0.0.43

Errors

Common errors & fixes

TypeError: transformStyleToTailwindcss is not a function

Attempted to use a named import as a default import or called from namespace incorrectly.

fix

Use `import { transformStyleToTailwindcss } from 'transform-to-tailwindcss-core'` (named import).

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Passed an object instead of a string to the `styles` parameter.

fix

Ensure `styles` is a string (e.g., 'color: red; font-size: 16px'). The library only accepts a string of CSS declarations.

Module not found: Can't resolve 'transform-to-tailwindcss-core'

The package is not installed or found in node_modules.

fix

Run `npm install transform-to-tailwindcss-core --save` or `yarn add transform-to-tailwindcss-core`.

Upgrade

Version history

0.0.43latest on npm

Audit

Dependencies

tailwindcssoptionalOnly needed if using the v4 canonical mode output classes.

Agent activity

9 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/Simon-He95/transform-to-tailwindcss-core ↗

packagetransform-to-tailwindcss-core ↗

homepagehttps://github.com/Simon-He95/transform-to-tailwindcss-core#readme ↗