[](https://www.npmjs.com/package/windify/)[](https://www.jsdelivr.com/package/npm/windify)[](https://www.jsdelivr.com/package/npm/windify)[](https://opensource.org/licenses/MIT/)[](https://github.com/sponsors/danieldietrich)[](https://twitter.com/danieldietrich/)
Toolless [TailwindCSS](https://tailwindcss.com) and [Windi CSS](https://windicss.org), 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](https://windicss.org) to generate the CSS. In the following we use _TailwindCSS_ as a synonym for all tools that support [TailwindCSS](https://tailwindcss.com) 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](#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 `