Skip to content

Latest commit

 

History

History
221 lines (162 loc) · 6.94 KB

index.md

File metadata and controls

221 lines (162 loc) · 6.94 KB

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.

{ className = input({ label: "New class name", value: "text-fuchsia-500", size: 4 })}

{ parsed = headlong.parse(className) }

{ button({ label: "toggle", onClick: toggle, disabled: !parsed })}

I am a Headlong test

Apply

Headlong exposes apply method mirroring Tailwind's @apply directive which allows to apply utility classes' styles to arbitrary css selectors.

{ applySelector = input({ label: "Apply selector", value: "#applied", size: 4 })}

{ applyClassName = input({ label: "Classes to apply", value: "text-fuchsia-500 italic", size: 4 })}

{ appliedStyles = headlong.apply(applySelector, applyClassName) }

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,
} = headlong(
  config,
  {
    container, // container element
    classes    // list of classes to ignore
  });

// ...

// 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
  • Min/max breakpoints, object, array notation breakpoints
  • @apply as a function (working apart from combined selectors)
  • Combined selectors like ("sm:dark:hover:")
  • Negated values using css calc function relying on PostCSS plugin
  • Keyframes customization
  • Proper breakpoints

Classes

Please refer to Tailwind documentation for all available classes.

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

{ headlong = init({}, { container: document.getElementById('md'), preflight: false, }) }

<style> h2, h3 { margin: 2rem 0 1rem; } html { line-height: 1.5; } </style>