headlong

Headlong

Tailwind CSS on the fly without PostCSS

README

Tailwind CSS produces thousands of classes most of which will never be used. Changes to the Tailwind configuration might take seconds to take effect, and who has seconds to waste these days? There are articles describing how to speed up Tailwind build times indicating the problem.

Headlong is a runtime version of Tailwind CSS which requires no PostCSS nor purging. Instead of generating all the classes beforehand it adds classes on the fly to the stylesheet whenever they are introduced in the DOM.

This library is not intended to replace the original Tailwind. Yet, there are environments where one cannot use PostCSS or maybe needs to interpolate the living hell out of those class names, or play with configuration.

Natural advantage of this approach is zero extra build time, all classes are available by default, no need to enable responsive or whatever plugin.

Headlong was built entirely using Ellx. Here's source code and demo.

Installation and usage

$ npm install headlong

import headlong from "headlong";

const {
  unsubscribe,
  parse,
  config,
  apply, // not quite there yet
} = headlong(config, containerEl);

// ...

// stop listening to changes when you're done
unsubscribe();

Roadmap

• Ring
• Divide
• Camelcased colors ("light-blue" is lightBlue in the default palette)
• "Extend" config section
• Preflight
• Container
• @apply as a function
• Combined selectors like ("sm:dark:hover:")
• Negated values using css calc function relying on PostCSS plugin
• Keyframes customization[]