Toolless TailwindCSS and Windi CSS, directly in the browser.

Features

* Use TailwindCSS and Windi CSS directly in the browser, no build tools needed!
* No need to learn anything about NodeJS, just edit and run index.html
* Processes all inline styles and transforms directives like @apply
* Prevents FOUC (flash of unstyled content)
* Tracks document changes by running in watch mode by default
* Parses TailwindCSS directives and replaces them with the corresponding CSS
* Scans the document for TailwindCSS classes and adds them to the document

Note: Windify internally uses Windi CSS to generate the CSS. In the following we use _TailwindCSS_ as a synonym for all tools that support TailwindCSS syntax.

Usage

1. Add Windify




`

2. Start to use TailwindCSS / Windi CSS syntax in your HTML

`html


Hello!


`

Windify will process all
`

3. Prevent FOUC (flash of unstyled content)

FOUC is prevented by hiding the HTML content until Windify is ready.

We do this by setting the hidden attribute on html, body or the _root_ element (see options below).

`html



`

Options

Windify can be configured with the following options:

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| minify | boolean | true | minify the output |
| parseCss | boolean | true | parse CSS styles