How should you author CSS in September 2026? This page compares the options worth
considering — classic preprocessors (Sass, Less, Stylus), compilers and utility frameworks
(Tailwind CSS, UnoCSS, StyleX), the ecosystem layer (PostCSS, Lightning CSS), scoped and
typed approaches (CSS Modules, vanilla-extract) — and the no-tool baseline of modern
native CSS. Each is judged on real pros and cons, popularity (registry downloads, GitHub,
surveys) and how loved it is — usage and affection are different things. Researched
and verified 7 September 2026.
The trend that matters: native CSS absorbed the preprocessors
Custom properties, cascade layers (@layer), container queries, :has() and
native CSS nesting (in every major browser since late 2023) now cover what variables,
organisation and parent selectors were bought for. State of CSS 2026 is blunt:
"pre-processor usage is declining and may soon be a thing of the past", and of people
asked which CSS-in-JS library they use, 59% use none — "its era may be
over". On frameworks, the survey's own prose warns that "the biggest threat to
Tailwind's crown may not be another CSS framework, but simply no framework at all" —
LLM-generated ad-hoc styling is named as a driver, and "None" (28%) has overtaken
Bootstrap (27%) for second place behind Tailwind (50%).
What still needs a tool: mixins (the most-wanted missing CSS feature for
two survey editions running — unsupported in every browser as of Feb 2026),
user-defined @functions (Chromium-only so far), loops and build-time code
generation. Those are the preprocessors' remaining reason to exist.
Pros and cons condensed from the full research; every claim verified against primary sources on 7 Sep 2026
No tool at all — modern native CSS
What a 2026 evergreen browser gives for free: tokens as custom properties (thematically re-assignable, JS-settable — strictly more powerful than compile-time Sass variables), nesting that reads exactly like Sass for everyday use, color-mix() replacing darken(), plus layers, container queries and :has() — things Sass never had. CSS satisfaction is rising in every survey.
Pros
- Zero build step, zero dependencies, zero supply chain — what you write is what ships
- Design-token workflows are first-class and now typable via
@property - No toolchain to version, audit or debug
Cons
- No mixins, functions or loops yet — reusable property groups mean copy-paste or selector lists
- No automatic dead-code control or minification — you hand-maintain CSS size
- Pre-2024 browsers still need transpilation for nesting/layers
Verdict: fully workable for evergreen-only, content-first sites with a token-based design system — precisely what this site does.
Sass — the mature incumbent
The most complete preprocessor feature set (mixins with @content, functions, maps, loops), a real @use module system, and genuinely active maintenance — Dart Sass 1.104.0 shipped 3 Sep 2026; LibSass reached end-of-life in Oct 2025. It remains what design systems mean by "preprocessed CSS".
Pros
- By far the most complete feature set; battle-tested since 2006
- Namespaced modules (
@use/@forward) — unlike Less or Stylus - Ecosystem weight: every major framework design system ships SCSS
Cons
- Build step and dependency chain; native CSS now duplicates most of its value
- Long migration runway:
@import deprecation warnings since Oct 2024; removal not before Dart Sass 3.0 - Nesting semantics subtly diverge from native CSS (textual expansion vs
:is()); evaluates modern CSS it doesn't understand (e.g. minmax(min(200px,100%),1fr) needs an escape) $variables die at compile time — runtime theming needs custom properties anyway
Verdict: still the default if you adopt a classic preprocessor — for large codebases and teams needing real mixin/function power. CSS-Tricks' 2025 verdict: "it depends" — drop it for small sites, keep it for legacy.
Tailwind CSS — the dominant framework
v4 (Jan 2025) was a ground-up rewrite: CSS-first configuration via @theme with tokens emitted as native CSS variables, cascade layers killing the old specificity war, automatic content detection, first-party Vite plugin, and a genuinely fast engine — full builds ~3.8× faster than v3, no-change rebuilds ~182× — with Lightning CSS doing prefixing and modern-syntax transforms under the hood. Current: v4.3.3 (16 Jul 2026).
@import "tailwindcss";
@theme {
--color-forest: oklch(0.42 0.12 150);
--breakpoint-3xl: 1920px;
}
Pros
- Design-token consistency by construction — no one-off values in markup
- Tiny on-demand output; no context-switching (style in markup)
- Largest ecosystem in the space: shadcn/ui, daisyUI, first-class Next.js support
- Loved: 62.1% of users "admire" it (Stack Overflow 2025); 97.5k GitHub stars
Cons
- "Class salad": 10–15 classes per element; markup described as write-only by critics
- Lock-in to its utility vocabulary; v4 browser floor (Safari 16.4+/Chrome 111+/Firefox 128+) rules out legacy audiences
- v3→v4 migration friction was real (renamed scales, changed defaults, reversed variant stacking)
- Business risk: Tailwind Labs laid off 75% of its engineers (4 → 1) in January 2026 after revenue fell ~80% as LLMs bypassed its docs; releases have continued (v4.2, v4.3)
- Divisive: "excessive Tailwind usage" is the only framework entry in the surveys' pain points
Verdict: the hiring-friendly, ecosystem-max default for new component apps that can accept its browser floor — used-and-loved by the majority, resented by a vocal minority, with a long-term maintenance question mark.
UnoCSS
An on-demand atomic CSS engine rather than a fixed utility library: presets compose, including a Tailwind-v4-compatible one, so the utility vocabulary is your choice.
Pros
- Smallest-possible output by design, with code-splitting
- Not locked to one utility language; presets compose freely
- Purpose-built integrations for Vite, Astro, Nuxt, Svelte
Cons
- No shadcn/ui-class component ecosystem — that world assumes Tailwind
- API churn (v66.x); config is power but homework
- No longer faster than Tailwind v4 (one independent 2025 benchmark found it ~1.4× slower)
- Single-maintainer funding model
Verdict: best for Vite/Vue/Nuxt/SvelteKit projects with bespoke design systems or hard bundle budgets; ~4% survey usage against Tailwind's 50% shows where the ecosystem went.
Less & Stylus — the also-rans diverge
Less (4.9.1, Sep 2026) kept the most CSS-like syntax and browser-side compilation, and lost the framework default when Bootstrap moved to Sass in v4. Its notable 2026 signal: a v5 alpha (13 Aug 2026) rewriting the compiler on a new "Jess" engine — CSS nesting preserved, BEM &-joining kept, :is() output allowed; explicitly "not a drop-in Less 4.x replacement yet". Downloads flat at 7.5M/week. Stylus (0.64.0, Oct 2024) is effectively dormant — no release since Oct 2024, last real commit Jan 2025, no EOL or successor statement — yet still 11.3k stars and 2.5M weekly downloads, mostly legacy (e.g. Hexo blogs).
Verdicts: Less — legacy Bootstrap-era and JS-centric projects; watch whether v5 lands. Stylus — don't start new work on it.
CSS Modules & vanilla-extract — scoped and typed
CSS Modules is a build-time convention, not a library: the bundler scopes your class names, output is plain CSS, zero runtime, zero configuration in Next.js, Vite and webpack. Downsides: typing is bolted on, no dynamic styles, and it quietly needs no maintenance because it's a stable spec. It is the most-used non-None answer in the CSS-in-JS survey question (~26%), and the most-loved when satisfaction was last measured (84.3% retention, 2023).
vanilla-extract (1.21.2, Jul 2026) is the TypeScript answer: styles in .css.ts files compiled to static CSS, with values type-checked, themes as typed token contracts and scoped CSS variables. "Mature, stable and predictable" per a 2026 field map; the friction is that styles live in a separate file and each toolchain needs a plugin. 2.43M weekly downloads; 71.8% retention in 2023 (second only to CSS Modules). Used by real design systems (e.g. Porsche's).
Shared strengths
- Real CSS as output, no runtime, RSC-safe
- Framework-agnostic — fits static sites and libraries alike
- vanilla-extract adds typed tokens and theme contracts
Shared costs
- Typing is bolted on for CSS Modules (generated .d.ts)
- vanilla-extract needs a bundler plugin and accepts static values only
- Smaller ecosystem mindshare than Tailwind or Sass
Verdict: both sit in the aftermath of runtime CSS-in-JS (styled-components went into maintenance mode in 2025, killed by Server Components and concurrent rendering). CSS Modules = lowest ceremony for plain-CSS scoping; vanilla-extract = the serious TypeScript-first design-system choice.
StyleX — Meta's compiler, for Meta-scale problems
Styles as typed objects colocated with components, compiled at build time (Babel plugin — the official core; the "Rust compiler" is a community SWC plugin) into deterministic atomic CSS with no specificity conflicts: "the last style applied always wins". CSS size plateaus as apps grow — facebook.com went from tens of megabytes of lazy-loaded CSS to a single few-hundred-kilobyte bundle. Open-sourced Dec 2023 from internal use across Facebook, Instagram, WhatsApp and Threads. npm 0.19.0; GitHub tags lag at 0.17.5.
Pros
- Deterministic merging and zero specificity wars — built for thousands of contributors
- CSS output plateaus in size; near-zero runtime
- Proven at extreme scale; actively developed by a dedicated Meta team
Cons
- Verbose API (acknowledged; shorthand roadmapped)
- Build-integration lag — no official Vite plugin/unplugin as of late 2025; hashed class names are hard to debug
- React-centred by design; constraints "mostly show up as friction" below Meta scale
- Tiny survey footprint (~1%, falling) and no satisfaction measurement; polarised sentiment
Verdict: only for very large, long-lived, multi-team React codebases where style collisions are the dominant cost. For anything smaller, the constraints outweigh the benefits.
PostCSS & Lightning CSS — the hidden layer
PostCSS is not a preprocessor language but a plugin-based CSS transformer (autoprefixer, cssnano, Stylelint) — the implicit CSS layer of Next.js and the Vite default, which is why it has the largest download figure of all (249M/week) even after Tailwind v4 moved off it. Lightning CSS is the Rust-based engine (by Parcel's author) that replaces autoprefixer + preset-env + CSS Modules in one browserslist-driven pass — already inside Tailwind v4's engine and Vite's default production minifier, hence 128.6M weekly downloads against only 7.7k stars. Its licence is MPL-2.0, not MIT.
Verdict: in any Next.js/Vite project both are already running whether you asked or not — learn their knobs before adding another layer. Install Lightning CSS directly when you want one fast native transform+minify tool without Tailwind.