Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danieldietrich/windify
🚀 Toolless Tailwind CSS and Windi CSS, directly in the browser.
https://github.com/danieldietrich/windify
css tailwindcss utility-first windicss
Last synced: about 1 month ago
JSON representation
🚀 Toolless Tailwind CSS and Windi CSS, directly in the browser.
- Host: GitHub
- URL: https://github.com/danieldietrich/windify
- Owner: danieldietrich
- License: mit
- Created: 2022-01-05T02:34:50.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-03T19:06:22.000Z (almost 3 years ago)
- Last Synced: 2024-08-09T11:15:26.699Z (3 months ago)
- Topics: css, tailwindcss, utility-first, windicss
- Language: JavaScript
- Homepage:
- Size: 85.9 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](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 [Tailwind CSS](https://tailwindcss.com) and [Windi CSS](https://windicss.org), directly in the browser.
## Features
* **Use Tailwind CSS 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 Tailwind CSS directives and replaces them with the corresponding CSS
* Scans the document for Tailwind CSS 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 _Tailwind CSS_ as a synonym for all tools that support [Tailwind CSS](https://tailwindcss.com) syntax.
## Usage
1. Add Windify `` to your HTML
```html
<!-- umd package -->
<script src="https://cdn.jsdelivr.net/npm/windify">
window.addEventListener('load', () => windify());
import windify from "https://esm.run/windify";
window.addEventListener('load', () => windify());
```
2. Start to use Tailwind CSS / Windi CSS syntax in your HTML
```html
Hello!
```
Windify will process all `` inline styles and transform directives like `@apply`
```html
<style lang="windify">
.hello {
@apply
text-purple-600 font-semibold;
}
}
```
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 `` 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](https://windicss.org/guide/configuration.html) |
All configuration properties are optional, choose the defaults you like:
```js
windify({
minify: false,
parseCss: false,
preflight: false,
root: document.querySelector('#root'),
watch: false,
windiCssVersion: '3.4.3',
config: {
...
}
});
```