GuidesLumos 0.0.1

Lumos vs Tailwind

What Lumos is, for anyone arriving from a utility-first CSS framework.

Lumos is more than a CSS framework

	Lumos	Tailwind
Utility classes	Included.	Included.
Design tokens	Included.	Included.
Color themes	Included.	Included.
Components	Included.	Not included.
TypeScripted props & variants	Included.	Not included.
Folder structure and naming	Included.	Not included.
Canonical URLs, sitemap and robots wiring	Included.	Not included.

What comes with Lumos

Components, not just classes
Assemble parts instead of restyling divs.
Props with types
Every prop is typed, and combinations that make no sense do not compile.
A shared shape for your projects
File paths and conventions decided once instead of per project.

Lumos ships lightweight HTML

Less markup to ship and read
The same layout arrives as one class instead of forty, on every element, on every page that uses it.
Smart defaults, overridable
The default is already right, and a utility overrides it where it is not. Fast where it does not matter, flexible where it does.
One class to switch in JavaScript
Toggling variant in Lumos is a single class. Swapping a variant made from utilities means changing every class that made it up.

Lumos

<div class="layout breakout">
  <div>
    <h2>Breaking out</h2>
    <p>The visual runs to the edge of the screen.</p>
  </div>
  <div>
    <img>
  </div>
</div>

<div class="layout breakout">
  <div>
    <h2>Breaking out</h2>
    <p>The visual runs to the edge of the screen.</p>
  </div>
  <div>
    <img>
  </div>
</div>

Tailwind

<div class="grid w-screen shrink-0 self-center lg:grid-cols-2">
  <div class="mx-auto w-[calc(100%-2rem)] py-16 md:w-[calc(100%-6rem)] md:py-28 lg:max-w-[45rem]">
    <h2 class="text-4xl font-medium leading-none tracking-tight text-balance md:text-6xl">Breaking out</h2>
    <p class="mt-6 text-lg leading-relaxed">The visual runs to the edge of the screen.</p>
  </div>
  <div>
    <img class="h-full w-full object-cover">
  </div>
</div>

<div class="grid w-screen shrink-0 self-center lg:grid-cols-2">
  <div class="mx-auto w-[calc(100%-2rem)] py-16 md:w-[calc(100%-6rem)] md:py-28 lg:max-w-[45rem]">
    <h2 class="text-4xl font-medium leading-none tracking-tight text-balance md:text-6xl">Breaking out</h2>
    <p class="mt-6 text-lg leading-relaxed">The visual runs to the edge of the screen.</p>
  </div>
  <div>
    <img class="h-full w-full object-cover">
  </div>
</div>

Lumos defines styles on the parent instead of reapplying them on each child

This means any new children added by the website maintainer or appended through scripts or third party libraries will automatically have the right styles without having to add extra classes.

Colors come from the parent

Lumos

<section class="section theme-dark">
  <h2>Heading text</h2>
  <a class="button_wrap" href="/docs">Read the docs</a>
</section>

<section class="section theme-dark">
  <h2>Heading text</h2>
  <a class="button_wrap" href="/docs">Read the docs</a>
</section>

Tailwind

<section class="dark bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white py-24">
  <h2>Heading text</h2>
  <a class="dark:bg-lime-300 dark:text-neutral-900 dark:hover:bg-white rounded-full bg-neutral-900 px-5 py-3 text-white hover:bg-neutral-700" href="/docs">Read the docs</a>
</section>

<section class="dark bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white py-24">
  <h2>Heading text</h2>
  <a class="dark:bg-lime-300 dark:text-neutral-900 dark:hover:bg-white rounded-full bg-neutral-900 px-5 py-3 text-white hover:bg-neutral-700" href="/docs">Read the docs</a>
</section>

Alignment comes from the parent

Lumos

<section class="section alignment-center">
  <h2>Heading text</h2>
  <div class="button-wrapper">
    <a class="button_wrap" href="/docs">Read the docs</a>
    <a class="button_wrap secondary" href="/download">Download</a>
  </div>
</section>

<section class="section alignment-center">
  <h2>Heading text</h2>
  <div class="button-wrapper">
    <a class="button_wrap" href="/docs">Read the docs</a>
    <a class="button_wrap secondary" href="/download">Download</a>
  </div>
</section>

Tailwind

<section class="text-center py-24">
  <h2>Heading text</h2>
  <div class="flex flex-wrap justify-center items-center gap-2">
    <a class="rounded-full bg-neutral-900 px-5 py-3 text-white" href="/docs">Read the docs</a>
    <a class="rounded-full border border-neutral-900 px-5 py-3" href="/download">Download</a>
  </div>
</section>

<section class="text-center py-24">
  <h2>Heading text</h2>
  <div class="flex flex-wrap justify-center items-center gap-2">
    <a class="rounded-full bg-neutral-900 px-5 py-3 text-white" href="/docs">Read the docs</a>
    <a class="rounded-full border border-neutral-900 px-5 py-3" href="/download">Download</a>
  </div>
</section>

Styles that apply themselves

Lumos optimizes for a parent that decides and children that follow, so the same combination of utilities is not retyped on every element that needs it, which is what makes one change a change everywhere. It gets there on modern CSS rather than around it: cascade layers, custom properties, nesting, clamp() and color-mix() are the framework itself, not the output of a build step.