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
- Add Windify
<script>to your HTML
<!-- umd package -->
<script src="https://cdn.jsdelivr.net/npm/windify"></script>
<script>
window.addEventListener('load', () => windify());
</script>
<!-- alternative: modern javascript -->
<script type="module">
import windify from "https://esm.run/windify";
window.addEventListener('load', () => windify());
</script>- Start to use TailwindCSS / Windi CSS syntax in your HTML
<h1 class="bg-gray-100 hello">Hello!</h1>Windify will process all <style lang="windify"> inline styles and transform directives like @apply
<style lang="windify">
.hello {
@apply
text-purple-600 font-semibold;
}
}
</style> - 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).
<body hidden>
<!-- content goes here -->
</body>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 <style lang='windify'> and process directives like @apply
|
| preflight | boolean | true | enables CSS reset for descendants of the root element |
| root | HTMLElement | document.body | the DOM element that will be scanned for windi classes |
| watch | boolean | true | enable/disable watch mode, only applies to the root element and its children |
| windiCssVersion | string | 'latest' | Windi CSS version that is used internally to parse and generate CSS |
| config | object | optional windicss config |
All configuration properties are optional, choose the defaults you like:
windify({
minify: false,
parseCss: false,
preflight: false,
root: document.querySelector('#root'),
watch: false,
windiCssVersion: '3.4.3',
config: {
...
}
});