Skip to content

🚀 Toolless Tailwind CSS and Windi CSS, directly in the browser.

License

Notifications You must be signed in to change notification settings

danieldietrich/windify

Repository files navigation

npm versionbrotliedhits/monthlicensesponsorfollow

Tailwind CSS Tailwind CSS

Toolless Tailwind CSS and Windi CSS, 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 to generate the CSS. In the following we use Tailwind CSS as a synonym for all tools that support Tailwind CSS syntax.

Usage

  1. 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>
  1. Start to use Tailwind CSS / 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>    
  1. 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: {
    ...
  }
});

About

🚀 Toolless Tailwind CSS and Windi CSS, directly in the browser.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published