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 class names a lot, 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.
$ npm install headlong
import headlong from "headlong";
const {
unsubscribe,
parse,
config,
// returns { styles, classes } of styles string and set of classes
output,
apply,
} = headlong(
config,
{
container, // container element
classes // list of classes to ignore
});
// ...
// stop listening to changes when you're done
unsubscribe();2021/2/20
- Disallow multiple instances of Headlong on the same page
- Add "output" method
- @apply for simple classes
- Combined selectors
- Fix container
- Add :checked variant
- Ring
- Divide
- Camelcased colors ("light-blue" is lightBlue in the default palette)
- "Extend" config section
- Preflight
- Container
- Min/max breakpoints, object, array notation breakpoints
-
@applyas a function (apart from combined variants just like in Tailwind 1.x) - Combined variants like ("sm:dark:hover:")
- Negated values using css
calcfunction relying on PostCSS plugin - Keyframes customization