@thebigsasha/tw-to-css
Advanced tools
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:
npm install tw-to-css -E
yarn add tw-to-css -E
pnpm i tw-to-css -E
<script src="https://unpkg.com/tw-to-css@0.0.12/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)'}
twi and twj functions accept multiple types of inputs.twi`bg-blue-700 ${false && "rounded"}`;
twi({ "bg-blue-700": true, rounded: false, underline: isTrue() });
twi([["bg-blue-700"], ["text-white", "rounded"], [["underline"]]]);
twi("bg-blue-700 text-white");
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 @thebigsasha/tw-to-css receives a total of 0 weekly downloads. As such, @thebigsasha/tw-to-css popularity was classified as not popular.
We found that @thebigsasha/tw-to-css demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.