Gathering detailed insights and metrics for tw-to-css
Gathering detailed insights and metrics for tw-to-css
Installations
npm install tw-to-cssDeveloper
Developer Guide
BETA
Module System
ESM
Min. Node Version
>=16.0.0
Typescript Support
Yes
Node Version
NPM Version
Statistics
149 Stars
45 Commits
18 Forks
2 Watching
1 Branches
5 Contributors
Updated on 23 Nov 2024
Languages
TypeScript (100%)
Total Downloads
Cumulative downloads
Total Downloads
5,686,343
Last day
-1.7%
9,805
Compared to previous day
Last week
-5%
53,972
Compared to previous week
Last month
-8.2%
246,696
Compared to previous month
Last year
112.2%
3,864,949
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
🔄 Tailwind to CSS (tw-to-css)
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
Installation
NPM module
1npm install tw-to-css -E
1yarn add tw-to-css -E
CDN
1<script src="https://unpkg.com/tw-to-css@0.0.12/dist/cdn.min.js"></script>
Usage
1import { twi, twj } from "tw-to-css"; 2 3// Convert classes to inline CSS 4const styleInline = twi(`bg-white mx-auto`); 5// Output: margin-left:auto;margin-right:auto;background-color:rgb(255, 255, 255); 6 7// Convert classes to JSON 8const styleJSON = twj(`bg-white mx-auto`); 9// Output: {marginLeft: 'auto', marginRight: 'auto', backgroundColor: 'rgb(255, 255, 255)'}
The twi and twj functions accept multiple types of inputs.
- Template Literal
1twi`bg-blue-700 ${false && "rounded"}`;
- Objects
1twi({ "bg-blue-700": true, rounded: false, underline: isTrue() });
- Arrays
1twi([["bg-blue-700"], ["text-white", "rounded"], [["underline"]]]);
- String
1twi("bg-blue-700 text-white");
twi and twj functions take an additional options object that allows you to configure the output.
Options:
| Option | Type | Default | Result |
|---|---|---|---|
| minify | boolean | true | Compresses the CSS code |
| merge | boolean | true | Combines all generated CSS classes into a single style block. |
Example:
1twi("bg-white mx-auto", { minify: false, merge: false }); 2/* 3Output: 4.mx-auto { 5 margin-left: auto; 6 margin-right: auto 7} 8 .bg-white { 9 background-color: rgb(255, 255, 255) 10} 11*/
You can also configure your own Tailwind config using the tailwindToCSS function:
1import { tailwindToCSS } from "tw-to-css"; 2 3const { twi, twj } = tailwindToCSS({ 4 config: { 5 theme: { 6 extend: { 7 colors: { 8 "custom-color": "#ff0000", 9 }, 10 }, 11 }, 12 }, 13});
Example of usage with React:
1import * as React from "react"; 2import { twj } from "tw-to-css"; 3 4export default function EmailTemplate() { 5 return ( 6 <html> 7 <body style={twj("font-sans text-md bg-white py-4")}> 8 <h1 style={twj("text-black text-center p-0 my-2 mx-0")}>Tailwind to CSS!</h1> 9 <p style={twj("text-gray-400 text-center")}>Transform Tailwind classes to pure CSS</p> 10 </body> 11 </html> 12 ); 13} 14 15/* 16Output: 17<html> 18 <body 19 style=" 20 background-color: rgb(255, 255, 255); 21 font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 22 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 23 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 24 'Noto Color Emoji'; 25 padding-top: 1rem; 26 padding-bottom: 1rem; 27 " 28 > 29 <h1 30 style=" 31 margin: 0.5rem 0px; 32 padding: 0px; 33 text-align: center; 34 color: rgb(0, 0, 0); 35 " 36 > 37 Tailwind to CSS! 38 </h1> 39 <p style="color: rgb(156, 163, 175); text-align: center"> 40 Transform Tailwind classes to pure CSS 41 </p> 42 </body> 43</html> 44*/
No vulnerabilities found.
No security vulnerabilities found.