Tailwind CSS Generator
npm install tailwind-css-generatorbash
npm install tailwind-css-generator
`
Quick Start
$3
`jsx
// Option 1: Basic version (Recommended - 62% smaller)
import generateTailwindBasic from "tailwind-css-generator/basic";
// Option 2: Full version (All utilities)
import generateTailwindCss from "tailwind-css-generator";
// Generate styles
generateTailwindBasic(); // or generateTailwindCss()
function App() {
return (
Hello Tailwind!
);
}
`
$3
`javascript
// CommonJS
const generateTailwindCss = require("tailwind-css-generator");
// ES Modules
import generateTailwindCss from "tailwind-css-generator";
import generateTailwindBasic from "tailwind-css-generator/basic";
`
$3
#### Clean Import (Recommended)
`javascript
// Full version
import generateTailwindCss from "tailwind-css-generator";
// Basic version
import generateTailwindBasic from "tailwind-css-generator/basic";
`
#### Direct File Import
`javascript
// If you need to specify exact file
import generateTailwindBasic from "tailwind-css-generator/basic.esm.js";
`
#### CDN Usage
#### Full Version
`html
Hello world!
`
#### Basic Version (Recommended for most projects)
`html
Basic Version
Item 1
Item 2
`
Advanced Usage
$3
#### Full Version
`javascript
import generateTailwindCss, { generateTailwindCssString } from "tailwind-css-generator";
// Custom configuration
const config = {
theme: {
extend: {
colors: {
primary: "#1234567",
secondary: "#abcdef"
}
}
},
corePlugins: {
float: false, // Disable specific plugins
clear: false
}
};
// Generate and inject styles with custom config
generateTailwindCss(config);
// Or just generate CSS string without injecting
const cssString = generateTailwindCssString(config);
console.log(cssString);
`
#### Basic Version
`javascript
import generateTailwindBasic, { generateTailwindCssStringBasic } from "tailwind-css-generator/basic";
// Custom configuration for basic version
const config = {
theme: {
extend: {
colors: { brand: "#ff0000" }
}
}
};
// Generate basic styles
generateTailwindBasic(config);
// Or get basic CSS string
const basicCssString = generateTailwindCssStringBasic(config);
console.log(Basic CSS size: ${basicCssString.length} characters);
`
$3
`javascript
import generateTailwindCss from "tailwind-css-generator";
// Generate multiple instances with different IDs
generateTailwindCss({ id: "main-styles" });
generateTailwindCss({
id: "custom-styles",
theme: {
extend: {
colors: { brand: "#ff0000" }
}
}
});
`
API Reference
$3
Main function that generates and injects complete Tailwind CSS styles into the document.
Parameters:
- options (Object, optional): Configuration options
- id (string): Unique identifier for the style tag (default: "tailwind-css")
- theme (Object): Theme configuration
- variants (Object): Variants configuration
- corePlugins (Object): Enable/disable core plugins
- prefix (string): Class prefix
$3
Lightweight function that generates essential Tailwind utilities (62% smaller).
Parameters: Same as full version
- id default: "tailwind-css-basic"
$3
Generates complete Tailwind CSS string without injecting it into the document.
Returns: CSS string (~22.6MB, 23M characters)
$3
Generates basic Tailwind CSS string without injecting it into the document.
Returns: CSS string (~2.5MB, 2.6M characters - 89% smaller)
$3
Utility function to process configuration options.
Development
$3
`
src/
├── index.js # Main entry point
├── config/ # Default configuration
├── generators/ # CSS generators for each utility
└── utils/ # Utility functions
`
$3
`bash
Install dependencies
npm install
Build all formats
npm run build
Build specific formats
npm run build:cjs # CommonJS
npm run build:esm # ES Modules
npm run build:min # Minified
npm run build:types # TypeScript definitions
`
$3
- index.js - CommonJS build (Full version)
- index.esm.js - ES Modules build (Full version)
- index.min.js - Minified build for CDN (Full version, ~95KB)
- basic.esm.js - ES Modules build (Basic version)
- basic.min.js - Minified build for CDN (Basic version, ~35KB)
- index.d.ts` - TypeScript definitions