Isomorphic Tailwind Compiler

This library is designed to let you programatically generate tailwinds css from a string of content, designed for server-side (Node.js) and client-side (browser) environments.

This package uses the official Tailwind CSS engine, including a custom single-threaded WASM build of the Oxide scanner for safe and efficient use in the browser. It is useful for generating tailwinds programatically in a build step in a uniform way on the client and server.

> This is being used as part of primary tooling for tailwind support inside web components for @semantic-org/semantic-next. You can see it in action in this Tailwinds example.

Key Features

* Extract Classes: Extract candidate tailwind classes from string
* Generate CSS from String: Generate tailwind css from strings of html and js
* Isomorphic: Works seamlessly in Node.js and modern browsers.
* WASM-Powered: Uses a WebAssembly-based scanner in the browser for high performance without dependencies.
* Zero Production Dependencies: Clean and lightweight for your projects.
* Component Plugin Included: Also includes a plugin for easy integration with a component definition structure.

Environment Selection

By default, the package automatically selects the appropriate engine based on your environment (Node.js vs browser). However, you can explicitly force a specific implementation:

$3

``javascript
import { generateTailwindCSS } from 'tailwindcss-iso/browser';

// Will always use the WASM-based scanner, even in Node.js
const tailwindCSS = await generateTailwindCSS({ content, css });
`

$3


`javascript
import { generateTailwindCSS } from 'tailwindcss-iso/server';

// Will always use the native Node.js implementation
// Note: This will fail in browser environments
const tailwindCSS = await generateTailwindCSS({ content, css });
`

This is useful for testing, benchmarking, or when bundler environment detection isn't working as expected.

API Reference

$3

Generates Tailwind CSS from content string.

#### Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| content | string | '' | HTML/JS content to scan for Tailwind classes |
| css | string | '' | Additional CSS to include in output (e.g., @theme directives) |
| importCSS | string | '@import "tailwindcss";' | Tailwind import statement, can include modifiers like important(#app) |
| candidates | string[] | [] | Pre-extracted candidate classes. If provided, skips content scanning |

#### Returns
Promise - The generated Tailwind CSS

#### Example
`javascript
const css = await generateTailwindCSS({
content: '

',
css: '@theme { --color-primary: #3b82f6; }',
importCSS: '@import "tailwindcss" important(#app);'
});
`

---

$3

Extracts Tailwind candidate classes from content.

#### Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| content | string | '' | HTML/JS content to scan |
| returnPositions | boolean | false | Return objects with position data instead of strings |
| extension | string | 'html' | File type hint for parser ('html', 'js', 'jsx', 'tsx', 'vue', etc.) |

#### Returns
Promise> - Array of class names or objects with positions

#### Example
`javascript
// Simple array of classes
const classes = await getTailwindClasses({
content: '

'
});
// Returns: ['p-4', 'bg-blue-500']

// With position information
const classesWithPos = await getTailwindClasses({
content: '

Hello

',
returnPositions: true
});
// Returns: [{ candidate: 'p-4', position: 13 }]
`

Examples

$3

`javascript
import { generateTailwindCSS } from 'tailwindcss-iso';

const css = '
@theme {
/ This changes the bluish grays to a monochrome color /
--color-gray-100: theme(colors.zinc.100);
--color-gray-300: theme(colors.zinc.300);
--color-gray-700: theme(colors.zinc.700);
--color-gray-950: theme(colors.zinc.950);
}
'

const content =

;

const tailwindCSS = await generateTailwindCSS({ content, css });

// The tailwindCSS variable now contains the generated Tailwind styles.
// You can inject this into a