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.
npm install tw-to-css -E
yarn add tw-to-css -E
<script src="https://unpkg.com/tw-to-css@0.0.1/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)'}
The first parameter expects the content, which can be in string or string[] format.
twi and twj functions take an additional options object that allows you to configure the output.| 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>
*/
FAQs
Tailwindcss Inline CSS
The npm package tw-to-css receives a total of 107,867 weekly downloads. As such, tw-to-css popularity was classified as popular.
We found that tw-to-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious Ruby gems typosquat Fastlane plugins to steal Telegram bot tokens, messages, and files, exploiting demand after Vietnam’s Telegram ban.
Research
Security News
Socket uncovered four malicious npm packages that exfiltrate up to 85% of a victim’s Ethereum or BSC wallet using obfuscated JavaScript.
Security News
TC39 advances 9 JavaScript proposals, including Array.fromAsync, Error.isError, and Explicit Resource Management, which are now headed into the ECMAScript spec.