Transform Tailwind classes to pure CSS using our plug-and-play package, compatible with both CSR and SSR. The package also includes the option to convert the output to JSON for use with React or other tools.
Here's a list of advantages of using the package:
- ✅ Simplifies integration of Tailwind CSS into projects
- ✅ Compatible with both Client-side and Server-side Rendering
- ✅ Plug-and-play, no configuration necessary
- ✅ Option to convert output to JSON for use with React or other tools
- ✅ Improves performance by eliminating runtime processing
- ✅ Reduces project size and build time
- ✅ Maintains the readability and maintainability of the Tailwind CSS codebase
npm install tw-to-css -Eyarn add tw-to-css -E<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>import { twi, twj } from "tw-to-css";
// Convert classes to inline CSS
const styleInline = twi(`bg-white mx-auto`);
// Output: margin-left:auto;margin-right:auto;background-color:rgb(255, 255, 255);
// Convert classes to JSON
const styleJSON = twj(`bg-white mx-auto`);
// Output: {marginLeft: 'auto', marginRight: 'auto', backgroundColor: 'rgb(255, 255, 255)'}- Template Literal
twi`bg-blue-700 ${false && "rounded"}`;- Objects
twi({ "bg-blue-700": true, rounded: false, underline: isTrue() });- Arrays
twi([["bg-blue-700"], ["text-white", "rounded"], [["underline"]]]);- String
twi("bg-blue-700 text-white");| Option | Type | Default | Result |
|---|---|---|---|
| minify | boolean | true | Compresses the CSS code |
| merge | boolean | true | Combines all generated CSS classes into a single style block. |
twi("bg-white mx-auto", { minify: false, merge: false });
/*
Output:
.mx-auto {
margin-left: auto;
margin-right: auto
}
.bg-white {
background-color: rgb(255, 255, 255)
}
*/import { tailwindToCSS } from "tw-to-css";
const { twi, twj } = tailwindToCSS({
config: {
theme: {
extend: {
colors: {
"custom-color": "#ff0000",
},
},
},
},
});import * as React from "react";
import { twj } from "tw-to-css";
export default function EmailTemplate() {
return (
<html>
<body style={twj("font-sans text-md bg-white py-4")}>
<h1 style={twj("text-black text-center p-0 my-2 mx-0")}>Tailwind to CSS!</h1>
<p style={twj("text-gray-400 text-center")}>Transform Tailwind classes to pure CSS</p>
</body>
</html>
);
}
/*
Output:
<html>
<body
style="
background-color: rgb(255, 255, 255);
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
padding-top: 1rem;
padding-bottom: 1rem;
"
>
<h1
style="
margin: 0.5rem 0px;
padding: 0px;
text-align: center;
color: rgb(0, 0, 0);
"
>
Tailwind to CSS!
</h1>
<p style="color: rgb(156, 163, 175); text-align: center">
Transform Tailwind classes to pure CSS
</p>
</body>
</html>
*/