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<scriptsrc="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 CSSconststyleInline=twi(`bg-white mx-auto`);// Output: margin-left:auto;margin-right:auto;background-color:rgb(255, 255, 255);// Convert classes to JSONconststyleJSON=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*asReactfrom"react";import{twj}from"tw-to-css";exportdefaultfunctionEmailTemplate(){return(<html><bodystyle={twj("font-sans text-md bg-white py-4")}><h1style={twj("text-black text-center p-0 my-2 mx-0")}>Tailwind to CSS!</h1><pstyle={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>*/