I Got Tired of Stitching Together Tailwind + a Component Library + a Theming Layer — So I Built FrontAlign

Eyruz Badalzada — Fri, 17 Jul 2026 20:06:11 +0000

Every front-end stack eventually hits the same wall.

You pick a utility-first CSS framework for styling. Then you realize you still need a separate library for modals, dropdowns, and carousels. Then you need a theming solution on top of that. Then you have to wire up lazy-loading for images yourself. And if you're using React, you're hoping someone already built the hooks for all of it.

Each piece works fine on its own. Together, they're three or four dependencies that don't fully agree with each other, requiring multiple config files and context providers.

That's the exact problem I set out to solve with FrontAlign — a unified UI engine that bundles utility-first CSS, a smart component runtime, a JIT compiler, and a dedicated React package into one system. Zero dependencies.

What makes FrontAlign different?

FrontAlign isn't "yet another utility CSS framework." It's an attempt to bring the pieces that usually live in separate libraries under one roof without the bloat:

Utility-first CSS built on a modern OKLCH color system (no more muddy colors) and native CSS layers (no more !important wars).
Smart, auto-initialized components (modals, drawers, smart carousels, tabs, etc.).
A built-in CSS compiler & JIT builder to prune unused styles for production.
Runtime theming — dynamically change your theme variables without a rebuild.
A skeleton loading system that works purely with HTML attributes.
Zero dependencies under the hood.

The "Aha!" Moment: The Smart Observer Runtime

Usually, if you inject new HTML into the DOM (via AJAX, React, HTMX, etc.), you have to manually re-initialize your JavaScript components. FrontAlign fixes this with its Smart Observer.

<!-- Add this anywhere, anytime -->
<div fa-component="swiper">
    ...
</div>

<!-- Lazy loads automatically just by using data-src -->
<img data-src="/image.jpg" alt="Lazy image">

FrontAlign watches the DOM. Render a component later? It initializes it. Add a lazy image? It loads it when it enters the viewport. No manual init() calls scattered throughout your app.

Form Validation... Without the JS Wiring

One of my favorite features I built into FrontAlign is declarative form validation. You don't need to write custom JS logic for basic validation or AJAX submissions.

<form fa-component="form" data-ajax="/api/submit" novalidate>
    <!-- Validates automatically based on data-rule -->
    <input type="email" data-rule="email">
    <button type="submit">Send</button>
</form>

It also includes complex components like dual-mode (min/max) range sliders right out of the box.

A JIT Compiler, Built In

Utility-first CSS is great for velocity, but it balloons your stylesheet. FrontAlign ships with its own compiler:

npx frontalign build

It scans your source files, keeps only the classes you actually reference, applies your fa.config.js theme tokens, and writes a single optimized stylesheet.

Runtime Theming vs Build-Time Config

FrontAlign cleanly separates build-time (JIT) and runtime. Need a white-label dashboard where users pick their own theme? You can inject themes at runtime without rebuilding:

new FrontAlign({
    theme: {
        primary: '#6366f1' // Updates instantly
    }
});

React Support (With Actual Hooks)

While FrontAlign works beautifully with plain HTML, Vue, Astro, or Laravel, I know React developers need component-level control. The library ships with a dedicated React package:

'use client';

import { useForm } from 'frontalign/react';

export function FormExample() {
  useForm();

  return (
    <form className="form" fa-component="form"noValidate>
      <div className="form-group is-floating">
        <input id="email" type="email" className="form-input"data-rule="email" />
        <label htmlFor="email">Email address</label>
      </div>

      <div className="form-group">
        <input type="range" className="form-range"fa-component="range" min="0" max="100" defaultValue="40" />
      </div>

      <button type="submit" className="button is-primary">Submit</button>
    </form>
  );
}

You can also import specific components rather than the whole engine if you want to keep your bundle tiny:

import { Modal, Toast, Skeleton } from 'frontalign';

All components and the framework's core are SSR-safe. You can use FrontAlign in any environment — from Next.js to plain static HTML.

Browser Support & The Future

FrontAlign leans heavily on modern platform features (IntersectionObserver, MutationObserver, CSS layers, OKLCH). Because of this, it targets modern browsers (Chrome 111+, Safari 15.4+). If you need to support IE11 or ancient browsers, this isn't the tool for you or you have to use fallback.

Where this is going

The primary goal right now isn't to out-utility Tailwind or out-component Bootstrap. It's to stop developers from needing both, plus a theming library, plus a lazy-load script, plus separate framework bindings, just to build a normal interface.

Try It Out

You can install it via NPM:

npm install frontalign

Or drop in the CDN to play around instantly:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frontalign/dist/css/frontalign.min.css">
<script src="https://cdn.jsdelivr.net/npm/frontalign/dist/js/frontalign.min.js"></script>
<script>
    new FrontAlign();
</script>

Try With Starter Template

You can install and run starter template with one command:

npx create-frontalign mytemplate --template agency

I'd genuinely love your feedback. If you try it on a real project and something breaks, feels off, or works beautifully, please let me know. Critical feedback is what will help this grow.

🔗 Website & Docs: frontalign.dev
⭐ GitHub Repo: Frontalign — a star would mean the world to me if you like the idea.

DEV Community: Eyruz Badalzada