☰

Headlong

Tailwind CSS on the fly without PostCSS

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.

Demo

Type any utility class name into the input. Click the button to toggle the class on the test div.

...

...

...

I am a Headlong test

Installation and usage

$ npm install headlong

import headlong from "headlong";

const {
  unsubscribe,
  parse,
  config,

  // returns { styles, classes } of styles string and set of classes
  output,

  apply, // not quite there yet
} = headlong(
  config,
  {
    container, // container element
    classes    // list of classes to ignore
  });

// ...

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

Roadmap

Classes

Please refer to Tailwind documentation for all available classes. Almost all of them work in headlong.

Placeholder color and opacity

Docs

<input
  type="text"
  placeholder="test placeholder"
  class="placeholder-red-500 outline-none placeholder-opacity-50 p-4 bg-red-100 my-8 block"
/>

Space between

Docs

<div class="flex space-x-8 align-center justify-center text-lg">
  <div class="w-1/5 h-16 py-4 text-xs bg-purple-300 text-cyan-200 text-center">
    1
  </div>
  <div class="w-1/5 h-16 py-4 text-xs bg-purple-300 text-cyan-200 text-center">
    2
  </div>
  <div class="w-1/5 h-16 py-4 text-xs bg-purple-300 text-cyan-200 text-center">
    3
  </div>
</div>
1
2
3

Divide

Docs

<div class="grid grid-cols-1 divide-y divide-yellow-500">
  <div class="py-4 w-full text-lg bg-yellow-100 text-yellow-700 text-center">
    1
  </div>
  <div class="py-4 w-full text-lg bg-yellow-100 text-yellow-700 text-center">
    2
  </div>
  <div class="py-4 w-full text-lg bg-yellow-100 text-yellow-700 text-center">
    3
  </div>
</div>
1
2
3

Gradients

Docs

<div
  class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 w-full h-12"
></div>
<div class="bg-gradient-to-r from-teal-400 to-blue-500 h-12"></div>
<div class="bg-gradient-to-r from-red-500 h-12"></div>

Ring

Docs

<div
  class="rounded-t-xl overflow-hidden bg-gradient-to-r from-blue-50 to-light-blue-100 grid grid-cols-1 sm:grid-cols-4 gap-6 justify-justify-center p-8"
>
  <div
    class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring ring-blue-200 text-center hover:shadow"
  >
    ring
  </div>
  <div
    class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-4 ring-blue-200 text-center hover:shadow"
  >
    ring
  </div>
</div>
ring
ring