💡 왼쪽 원문을 읽으면서 오른쪽에 따라 써보세요. Tab 키로 힌트를 받을 수 있습니다.

원문 렌더가 준비되기 전까지 텍스트 가이드로 표시합니다.

Prologue — CSS Is No Longer Just "Style"

In the 2010s, CSS was "a tool for turning design mocks into pixels." In the early 2020s, Tailwind reframed that into "composing utilities." And in 2026, CSS has reshaped itself once more.

- **Tailwind CSS v4.0** (formal release January 2025) shipped the Rust-based **Oxide engine** and made builds on average **100x faster than v3**. CSS-first config (the `@theme` directive), native cascade layers, and oklch color space became the defaults.

- **shadcn/ui** standardized a model where you don't `npm install` a library — a CLI copies component source into your project. Radix UI primitives + Tailwind classes = your code. It's the most-used React component library of 2026.

- **Chakra UI v3** was rebuilt on top of Ark UI. It dropped its v2 emotion runtime dependency and moved to Panda CSS build-time extraction. It pairs much better with RSC.

- **Mantine 7** abandoned css-in-js and returned to **CSS Modules + PostCSS**. "Zero runtime" became the slogan of 2026 component libraries.

- Native CSS is no longer weak. **Container queries · View Transitions API · anchor positioning · `:has()` · `@layer` · `color-mix()` · oklch** are all Baseline in 2026.

This article maps that entire landscape in a single pass. From the first utility class you write to design tokens, accessibility primitives, build-time CSS-in-JS, and multi-framework UI libraries. And the selection matrix in between — when to pick which tool.

Chapter 1 · The CSS Landscape of 2026 — A Single Map

A picture first. Before knowing the tools, know **where each tool sits**.

[ Design Tokens / Variables ]

Open Props · CSS Variables · Tokens Studio

[ CSS Authoring Style ]

┌──────────────┬──────────────┬───────────────┐

│ Utility-first│ CSS Modules │ CSS-in-JS │

│ (Tailwind) │ (Mantine 7) │ (build-time: │

│ (UnoCSS) │ (Pure CSS) │ Panda·VE) │

│ │ │ (runtime: │

│ │ │ Emotion· │

│ │ │ styled-comp) │

└──────────────┴──────────────┴───────────────┘

[ Component Layer ]

┌──────────────┬──────────────┬───────────────┐

│ Unstyled │ Themed │ Opinionated │

│ Primitives │ Components │ Design System │

│ Radix · Ark │ shadcn/ui │ MUI · AntD · │

│ HeadlessUI │ HeroUI · │ Mantine · │

│ Bits · Melt │ DaisyUI │ Chakra v3 │

└──────────────┴──────────────┴───────────────┘

[ Build Pipeline ]

PostCSS · Lightning CSS · Vite · Turbopack

── Browser ──

Who owns which row of this map defines your stack choice.

- **Token layer** — single source of truth for color · spacing · type. Open Props is becoming the "framework-free token" standard.

- **Authoring style** — utility (Tailwind), scoped (CSS Modules), compile-time (Panda · VE).

- **Component layer** — unstyled primitives (Radix), copy-paste (shadcn), full design system (MUI · AntD).

- **Build pipeline** — Lightning CSS is fast-replacing PostCSS.

The one line to remember: **"In 2026, a CSS stack is not a library; it is four layers."**

Chapter 2 · Tailwind CSS v4 — The Oxide Engine and CSS-First Config

Start with numbers. Tailwind reaches **24M+ weekly npm downloads** and **85k+ GitHub stars** as of May 2026 — the de-facto utility-first standard. v4.0 (formal release Jan 2025) changed three things in one breath: **the Rust engine, CSS-first config, and native cascade layers.**

A minimal config. The simplicity is clear next to v3.

/* app/globals.css — the v4 way */

@import "tailwindcss";

@theme {

--color-brand: oklch(0.7 0.15 250);

--font-display: "Inter", sans-serif;

--spacing-4-5: 1.125rem;

}

@layer components {

.btn-brand {

@apply rounded-md bg-brand px-4 py-2 text-white;

}

The `tailwind.config.js` file is gone. All configuration moves into CSS via the `@theme` directive. The old JS-config style still works in compat mode, but CSS-first is the recommendation for new projects.

The **Oxide engine** result, in numbers, against the Tailwind team's benchmark:

- Full build: **3.5x faster than v3**

- Incremental build (one character changed): **100x+ faster than v3**, typically under 5ms

- Cold first build, 10K files scanned: 1.5s in v3 → 0.1s in v4

Plus:

- **Automatic content detection** — no more `content: []`. Tailwind walks the file tree itself.

- **All tokens as CSS variables** — accessible at runtime via `var(--color-blue-500)`.

- **First-class container queries** — `@container`, `@sm:`, `@md:` variants.

- **`@starting-style` and transition refinements** — new CSS APIs come in naturally as utilities.

Migration is not free. `npx @tailwindcss/upgrade` handles most translation, but patterns like v3's `bg-opacity-50` are coerced into slash notation (`bg-blue-500/50`), among other touchpoints.

Chapter 3 · Tailwind UI / Tailwind Plus — The Weight of Paid Components

The Tailwind team's paid component collection was rebranded in late 2025 from "Tailwind UI" to **"Tailwind Plus."** The one-time lifetime license model remains the same.

The 2026 lineup:

- **Tailwind Plus UI Blocks** — 500+ marketing · application · e-commerce blocks (formerly Tailwind UI).

- **Tailwind Plus Templates** — full Next.js · Astro templates like Spotlight · Studio · Pocket · Salient.

- **Tailwind Plus UI Kit** — design kits for Figma · Sketch · Adobe XD.

- **Catalyst** — a React component library that ships via source copy (similar in spirit to shadcn).

With shadcn/ui occupying much of that territory free and open source, Tailwind Plus differentiates on two pillars: "designer-grade finish" and "consistency authored by the Tailwind team itself." For teams that can save time at scale the value is clear, but for solo developers shadcn often suffices.

Chapter 4 · shadcn/ui — Not a Library, Copy-Paste

shadcn/ui is the most important React component library of 2026. And yet — it isn't a package on npm. To be precise, the `shadcn` CLI is on npm, but the components themselves are **copied into your project.**

Initialize — creates components.json

npx shadcn@latest init

Add the Button component — copied to components/ui/button.tsx

npx shadcn@latest add button

Multiple at once

npx shadcn@latest add dialog dropdown-menu tooltip

After the copy, `button.tsx` is entirely your code, line by line. When the design needs to change, you edit that file directly. There is no dependency upgrade.

Why did this model win?

1. **No version lock-in** — library updates don't break you. It's your code.

2. **Freedom to customize** — modify Tailwind classes directly. No theme-override backdoors needed.

3. **Perfect tree-shaking** — components you don't add never appear in the project.

4. **TypeScript as a first-class citizen** — every component is authored in TS, inference is sharp.

5. **It sits on Radix UI** — accessibility, keyboard interactions, and ARIA are all already proven.

Licensing is MIT. The Radix UI dependency is also MIT. The "AGPL worry" you may have read was a misunderstanding (historic confusion with v0/Vercel). You can use it in commercial projects freely.

The block catalog of 50+ full-page examples includes card grids, dashboards, forms, charts, sidebars, and login pages. Bring those in, swap the text, and 90% of an admin page is done.

Chapter 5 · Radix UI / Radix Themes 3 — The Accessibility-Primitive Standard

Radix UI splits into two lines.

- **Radix Primitives** — unstyled accessible components (`@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, etc.)

- **Radix Themes** — styled components on top (v3 released in December 2025).

While shadcn/ui wraps Primitives from above, Radix Themes 3 offers "drop-in" styled components. v3 changes:

- **CSS-variable based theming** — radius, scale, contrast adjustable at runtime.

- **First-class dark mode** — one line: `<Theme appearance="dark">`.

- **New components** — `Spinner`, `SegmentedControl`, `DataList`, `ColorPicker`, and more.

- **Smaller bundles** — about 30% reduction vs. v2.

Using Primitives alone has a clear payoff. You don't have to implement keyboard traps, focus management, ARIA roles, or screen-reader compatibility by hand. A single Dialog already ships `onOpenChange`, `modal`, `defaultOpen`, focus trap, and scroll lock. Hand-rolling that is a month of work.

// Radix Primitives — bring your own style

Chapter 6 · Mantine 7 — One Pole of Full-Stack React UI

Mantine was emotion-based in v5 (2022), then **moved entirely to CSS Modules + PostCSS in v7.** As of May 2026, v7.13 is the stable line, and runtime CSS-in-JS is fully gone.

Core value:

- **120+ components** — from Button and Input to RichTextEditor, Carousel, DataTable, and Spotlight.

- **`@mantine/hooks`** — 70+ utility hooks. `useDisclosure`, `useDebouncedValue`, `useIntersection`, etc.

- **`@mantine/form`** — a strong form library. Zod · Yup integrations.

- **`@mantine/notifications`** — toast notification system.

- **`@mantine/modals`** — modal manager (open modals without useState boilerplate).

- **`@mantine/dates`** — date pickers, calendars.

- **`@mantine/charts`** — chart components on top of Recharts.

Mantine versus shadcn/ui:

| Item | shadcn/ui | Mantine 7 |

|------|----------|-----------|

| Install | Copy-paste | npm package |

| Style | Tailwind | CSS Modules |

| Customize | Edit source | Theme object + className |

| Component count | 50+ | 120+ |

| Forms · Charts | Separate libs | First-party |

| RSC compatible | Partial (mostly client) | Partial (`'use client'` required) |

| Bundle impact | Only what you add | Tree-shaking works |

Mantine fits teams that want "everything in one box." shadcn fits teams that want "core blocks; we'll build the rest."

Chapter 7 · Chakra UI v3 — A Rewrite on Top of Ark UI

Chakra UI shipped a major refactor late 2024 with v3. The biggest changes:

- **Rebuilt on Ark UI** — same behavior across React · Solid · Vue.

- **Style moved to Panda CSS at build time** — emotion runtime dependency dropped.

- **Recipe system** — type-safe variants.

- **JSX patterns** — `<Stack>`, `<Grid>`, `<Wrap>` layout primitives as first-class.

// Chakra UI v3 — a snippet

v2 → v3 migration is significant work. `colorScheme` → `colorPalette`, theme object restructure, Provider changes — nearly every component call is touched. Teams with large v2 codebases must follow a phased migration guide.

By 2026, Chakra v3's spot is "a full library like Mantine, but with Panda CSS · Ark UI integration that keeps a multi-framework future open."

Chapter 8 · HeadlessUI 2 · Ark UI · Park UI — The Primitive Multiverse

It doesn't end with Radix UI.

**HeadlessUI 2** (Tailwind Labs)

- Made by the Tailwind team — sits most naturally next to Tailwind styles.

- React and Vue support.

- v2 added anchor positioning and improved render-prop ergonomics.

- Smaller component set than Radix (Combobox, Dialog, Disclosure, Listbox, Menu, Popover, Switch, Tabs).

- For Tailwind-only projects, lighter than Radix.

**Ark UI**

- Multi-framework primitives built on Zag.js (state machines) — one codebase for React · Vue · Solid.

- From the Chakra team (Segun Adebayo).

- 50+ components — broader than Radix.

- The #1 pick if you want "component logic untied from any framework."

**Park UI**

- A design system on top of Ark UI — integrated with Panda CSS.

- Copy-paste model like shadcn.

- The "Ark UI + Panda CSS + design tokens" experience as one set.

**Bits UI · Melt UI** (Svelte)

- The Radix counterpart in the Svelte ecosystem.

- Melt UI is the low-level builder; Bits UI lays a component API on top.

Chapter 9 · Open Props — Framework-Free Tokens

Made by Adam Argyle (Chrome DevRel), **Open Props** is "a token library where every CSS variable is pre-defined." A one-line import brings the variables of a whole design system into your project.

@import "https://unpkg.com/open-props";

@import "https://unpkg.com/open-props/normalize.min.css";

.card {

padding: var(--size-4);

border-radius: var(--radius-3);

box-shadow: var(--shadow-3);

background: var(--surface-2);

color: var(--text-1);

font-size: var(--font-size-2);

}

@media (prefers-color-scheme: dark) {

/* Automatic dark mode — Open Props normalize handles it */

}

Pros:

- **Framework-agnostic** — pairs with Tailwind, with CSS Modules, with vanilla CSS.

- **Well-designed scales** — 18 colors × 12 steps, sizes 0-15, radii 1-5, shadows 1-6, font sizes 00-8 — a single consistent scale.

- **Auto dark mode** — `normalize.css` handles `prefers-color-scheme`.

- **Adopt gradually** — bring in only the tokens you need.

In 2026, Open Props splits into two branches:

- **Open Props (CSS)** — the original. A bundle of CSS variables.

- **Open Props for Tailwind** — a variant you can import via `@theme` in Tailwind v4.

It fits small sites, library demos, and large projects that only want to borrow tokens.

Chapter 10 · UnoCSS — Instant On-Demand Atomic CSS

UnoCSS is an atomic CSS engine by Anthony Fu (Vue · Vite core member). As of May 2026, v0.65 is stable, and it runs across Vue · React · Svelte · Solid.

Core ideas:

- **Preset-based** — Tailwind-compat, Wind, the UnoCSS default, attributify, icons, and more.

- **Instant build** — on-demand generation, even faster than JIT.

- **icons preset** — `i-mdi-home` as one class to inline 100k+ icons as SVG.

- **Inspector tool** — visualize which class produces which CSS.

// uno.config.ts

export default defineConfig({

presets: [

presetUno(),

presetAttributify(), // attributify mode: bg="blue-500", etc.

presetIcons({ scale: 1.2 }), // i-mdi-home, i-tabler-user, etc.

theme: {

colors: { brand: '#0ea5e9' },

})

Versus Tailwind v4:

| Item | Tailwind v4 | UnoCSS |

|------|-------------|--------|

| Engine | Rust (Oxide) | TS, Vite-friendly |

| Build speed | Very fast | Very fast |

| Preset | Single unified | Modular |

| Attributify mode | Not present | `<div bg="blue-500" />` |

| Icons | Separate | Built-in preset |

| Ecosystem | Overwhelming | Smaller, growing fast |

| Next.js integration | First-class | Vite-first, Next plugin exists |

UnoCSS often feels more natural in Vite · Astro · Nuxt projects. For Next.js 13+, Tailwind v4 is easier.

Chapter 11 · Panda CSS — The Model Build-Time CSS-in-JS

Panda CSS is **build-time CSS-in-JS** by the Chakra UI team. It addresses the weaknesses of runtime CSS-in-JS like emotion · styled-components (bundle size, RSC incompatibility) while keeping type-safe tokens · recipes · patterns.

// panda.config.ts

export default defineConfig({

preflight: true,

include: ['./src/**/*.{ts,tsx}'],

theme: {

tokens: {

colors: {

brand: { value: 'oklch(0.7 0.15 250)' },

recipes: {

button: {

base: { px: '4', py: '2', rounded: 'md' },

variants: {

variant: {

solid: { bg: 'brand', color: 'white' },

outline: { borderWidth: '1px', borderColor: 'brand' },

})

// Usage

Pros:

- **Build-time extraction** — zero runtime. No emotion in the bundle.

- **Type safety** — tokens · recipes · variants are all protected by generated types.

- **JSX patterns** — `<Stack>`, `<Grid>` and friends as layout primitives.

- **Multi-framework** — React · Solid · Vue · Preact · Qwik · Astro.

The strongest endorsement is that Chakra UI v3 itself sits on top of Panda.

Chapter 12 · Vanilla Extract — Another Road for TypeScript CSS

Vanilla Extract is **CSS written in TypeScript** from the Seek team. You write CSS objects in TypeScript in `.css.ts` files; the build extracts static CSS.

// button.css.ts

export const base = style({

padding: '0.5rem 1rem',

borderRadius: '0.375rem',

})

export const variants = styleVariants({

solid: { background: 'blue', color: 'white' },

outline: { border: '1px solid blue', color: 'blue' },

})

Pros:

- **Zero runtime** — the build output is static CSS.

- **Type-safe CSS-in-JS** — auto-inferred tokens and class names.

- **Perfect RSC compat** — none of the library code ends up in the client bundle.

- **Stitches-like variants API** — `recipe()` helper is its own package.

Compared to Panda CSS, Vanilla Extract is "smaller, more explicit, and component-style focused rather than design-system focused." Panda makes tokens · recipes · presets first-class; VE has them as separate packages (Sprinkles, Recipes).

Chapter 13 · The Twilight of CSS-in-JS — Emotion · styled-components · Stitches

Half the React ecosystem from 2020-2023 ran on emotion and styled-components. By 2026, they are shrinking fast. Three reasons:

1. **RSC incompatibility** — emotion forces client components and pushes awkward serialization patterns.

2. **Bundle weight** — emotion 11 is ~13KB gzip; styled-components 6 is ~12KB. That's heavy for small sites.

3. **Build-time CSS-in-JS matured** — Panda · Vanilla Extract · Linaria deliver the same DX with zero runtime.

**Stitches** has effectively been unmaintained since 2023. **styled-components** isn't deprecated outright as of 2024, but the core team signaled "not recommended for new projects."

Migration paths from existing emotion / styled-components codebases:

- **emotion + Chakra v2** → **Panda CSS + Chakra v3**

- **styled-components in general** → **Tailwind / CSS Modules / Panda**

- **Stitches** → **Vanilla Extract / Panda** (closest variants API)

For new projects in 2026, there is little reason to pick runtime CSS-in-JS.

Chapter 14 · DaisyUI · Flowbite · HeroUI · NextUI — Named Components Atop Tailwind

Tailwind is utility-only, but three branches of "named-component" libraries grew on top of it.

**DaisyUI**

- Tailwind plugin. Class names are semantic (`btn`, `card`, `modal`).

- 30+ built-in themes. Dark mode is one line.

- Components are class-composition macros — no JS · React tie-in.

- Best fit for HTML/CSS-only projects.

**Flowbite**

- React · Vue · Svelte components on Tailwind.

- Heavy marketing-page block library.

- Free + Pro (additional blocks).

**HeroUI** (formerly NextUI v2)

- NextUI rebranded to HeroUI in 2025.

- Semantically-named React UI — `<Button color="primary" variant="solid">`.

- Tailwind v4 compatible; internals shifting to vanilla CSS.

**NextUI v1**

- Maintenance effectively ended. Migration to HeroUI recommended.

If shadcn/ui is "copy-paste," HeroUI is "package import." Both ship modern designs. The choice is "do I want this in my code, or do I want the library to own its internals?"

Chapter 15 · MUI v6 · Material UI · Joy UI — The Material Camp

**MUI v6** (released November 2024) is the main line. The key changes are partial Material Design 3 (Material You) support, a CSS-variables mode, and integration with Pigment CSS (their own build-time CSS-in-JS).

- **`@mui/material`** — Material Design components.

- **`@mui/joy`** — a modern alternative away from Material. Lighter weight, CSS-variable based.

- **`@mui/x`** — Pro/Premium paid components like DataGrid, Date Pickers, Charts, Tree View.

In 2026, MUI's spot is "the proven choice for enterprise React UI." Weaknesses:

- Large bundle (`@mui/material` ~280KB minified, ~80KB gzip).

- Emotion runtime dependency (transitioning to Pigment CSS, still in progress).

- Designs look "like Material" — often a mismatch for brand-heavy consumer sites.

Strong in enterprise · admin dashboards · internal tools, but for new consumer products shadcn · HeroUI · Mantine come up more often.

Chapter 16 · Ant Design 5 — The China-Origin React UI Standard

Ant Design is a React UI library from Alibaba. It is the de-facto standard in the Chinese market, and globally it shows up often in enterprise admin contexts.

v5 (late 2022) major changes:

- **CSS-in-JS** — emotion → their own cssinjs library. The v6 roadmap is discussing build-time extraction.

- **Design tokens** — token-based theme customization.

- **Global dark mode** — `algorithm: theme.darkAlgorithm`.

- **Pro Components** — `@ant-design/pro-components` packages admin patterns (LayoutPro, TableForm) separately.

Its strengths are component count and admin-scenario fit. Form, Table, Tree, Transfer, Mentions, DatePicker.RangePicker — complex components work out of the box. However:

- Designs project a strong "Ant Design look." Dropped onto a brand site, it looks off.

- Big bundle.

- i18n · locale — supports Korean and Japanese (and many more).

It can be the fastest path to a large admin panel.

Chapter 17 · Vue · Svelte · Solid — A Multi-Framework Landscape

React is not the whole story.

**Vue**

- **Vuetify 3** — Material Design for Vue. The largest Vue UI library in 2026.

- **Quasar 2** — Vue cross-platform — web · mobile (Cordova/Capacitor) · desktop (Electron · Tauri) from one codebase.

- **Element Plus** — Element UI ported to Vue 3. Strong in China-origin admin.

- **PrimeVue** — part of the PrimeFaces family. Wide component set, rich theming.

- **Naive UI** — TS-first modern Vue UI.

**Svelte**

- **Skeleton UI** — full design system on Svelte + Tailwind.

- **Bits UI / Melt UI** — Svelte's answer to Radix.

- **shadcn-svelte** — a Svelte port of shadcn/ui.

**Solid**

- **Solid UI** — shadcn-style copy-paste components, on top of Kobalte.

- **Kobalte** — Solid's Radix counterpart. Comparable to Ark UI.

**Framework-agnostic**

- **PrimeReact · PrimeNG · PrimeVue · PrimeFlex** — PrimeTek's consistent design across React · Angular · Vue.

- **Yamada UI** — a React UI library by a Japanese developer. Sits in the Chakra · Mantine area.

Chapter 18 · Classic · Minimal · Classless CSS

Not every project needs Tailwind plus a heavy component library.

**Pico CSS**

- Classless — even bare `<button>` and `<input>` look polished.

- Under 10KB gzip.

- Auto dark mode.

- Immediate payoff for documentation · blog · small sites.

**Bulma**

- Pure CSS — no JS · React dependency.

- Class-based components (`.button`, `.card`, `.notification`).

- Actively maintained in 2026.

**Pure CSS**

- Out of Yahoo, ~4KB of minimal components.

- Almost a classic by now — stable.

**Tachyons**

- Atomic CSS before Tailwind — `pa3 ba br3 b--silver`.

- Tailwind v4 effectively absorbed it, but small codebases still use it.

**Modern CSS Reset · sanitize.css · normalize.css · the new "Open Props" reset**

- Reset libraries are alive and well in 2026.

- Tailwind ships its own `preflight`; for vanilla CSS projects, Andy Bell's modern-css-reset is close to a standard.

These fit minimalist sites, content sites, and one-week prototypes. There is a clear zone where "we don't need to reach for Tailwind."

Chapter 19 · Native CSS in 2026 — What Became Possible Without a Framework

Native CSS features that are Baseline (or nearly so) as of May 2026:

**1. Container queries**

.card {

container-type: inline-size;

}

@container (min-width: 400px) {

.card-content { display: grid; grid-template-columns: 1fr 2fr; }

}

Media queries depend on the viewport; container queries depend on the parent container. Decisive for sidebars · cards · widgets.

**2. View Transitions API**

::view-transition-old(root),

::view-transition-new(root) {

animation-duration: 0.3s;

}

document.startViewTransition(() => updateDOM())

Page/view transitions via CSS animation. Next.js 15, Astro 5, and Nuxt 4 all support it natively.

**3. The `:has()` selector**

/* form whose child has .error */

form:has(.error) { border-color: red; }

CSS's first "parent selector." Many patterns that needed JS no longer do.

**4. CSS Nesting**

.card {

padding: 1rem;

& .title { font-weight: bold; }

&:hover { background: oklch(0.95 0.02 250); }

}

The single biggest reason Sass is no longer required. Tailwind v4 uses it internally.

**5. Cascade Layers (`@layer`)**

@layer reset, base, components, utilities;

@layer components { .btn { } }

@layer utilities { .text-red { } }

The end of the specificity wars. Tailwind v4 adopted it as a first-class citizen.

**6. `color-mix()` · oklch**

:root { --brand: oklch(0.7 0.15 250); }

.btn { background: var(--brand); }

.btn:hover { background: color-mix(in oklch, var(--brand) 80%, white); }

oklch has far better perceptual uniformity than sRGB. Tailwind v4 adopted it as the default color space.

**7. Anchor Positioning**

.tooltip {

position-anchor: --my-button;

position-area: top span-all;

}

A Floating UI alternative without JS. Chrome 125+ supports it; Firefox and Safari are following.

**8. Popover API**

Modals · popovers · menus without JS. Keyboard traps · ESC · backdrops are automatic.

Thanks to these features, the territory for "framework-less CSS" has come back. Small sites can be rich with just Tailwind + modern CSS.

Chapter 20 · Build Tools — PostCSS · Lightning CSS · the Place of Sass

CSS still gets built. The 2026 pipeline:

**Lightning CSS** (Devon Govett, Parcel team)

- A CSS parser · transformer · minifier in Rust.

- esbuild · Vite · Turbopack · Parcel 4 ship it (built-in or opt-in).

- 10-100x faster than PostCSS.

- Includes auto vendor-prefixing, nesting transpilation, and minification.

- Tailwind v4 uses it internally.

**PostCSS**

- Still widely used, but new projects tend to use Lightning CSS directly.

- Autoprefixer and postcss-preset-env remain the key plugins.

**Sass · LESS · Stylus**

- Sass survives. With variables · mixins · functions largely replaced by CSS variables · CSS functions, new-project adoption is down, but Sass remains first-class in large design system codebases (Material · Bootstrap).

- LESS lives on in Ant Design and some enterprise stacks.

- Stylus is effectively unused.

**CSS Modules**

- Rebounded as the scope solution for standard CSS. Mantine 7 and Next.js 15 give it first-class support.

- A `.module.css` file is auto-hashed.

Recommended pipeline for new projects:

1. Vite · Next 15 · Astro 5 (Lightning CSS built in)

2. Tailwind v4 (Oxide engine, uses Lightning CSS)

3. CSS Modules or Panda CSS per component

4. Sass only if a large existing design system requires it

Chapter 21 · Design Systems · Tokens · Catppuccin · Rose Pine · Tokyo Night

Color palettes and tokens are not bound to libraries.

**Tokens Studio** (formerly Figma Tokens)

- A Figma plugin — define design tokens in Figma, export as JSON.

- Style Dictionary converts that JSON into CSS · Tailwind · iOS · Android.

**Style Dictionary** (Amazon)

- The standard token-conversion tool. One JSON → every platform.

**Open Props**

- See Chapter 9. "Pre-built tokens you can use directly."

**Color schemes · theme collections**

Modern schemes born in developer tooling but now widely used in web design:

- **Catppuccin** — four tones (Latte · Frappé · Macchiato · Mocha) — VS Code · iTerm · web · everywhere.

- **Rose Pine** — soft classic tones (Main · Moon · Dawn).

- **Tokyo Night** — dark, inspired by Tokyo at night.

- **Gruvbox**, **Nord**, **Dracula**, **Solarized** — the classics.

These schemes ship CSS variables, Tailwind plugins, and Figma files. One-line import wraps up the color half of your design system.

Chapter 22 · Regional UI Libraries — Toss · VARCO · Yamada

Regional React UI libraries stood out from 2024-2026.

**Korea**

- **Toss UI library** — `@toss/use-funnel`, `@toss/react`, `@toss/utils`. Less a "component library" and more a curated set of React utilities. Patterns proven in Toss production.

- **NCsoft VARCO design system** — specialized for game · entertainment UX. Public surface is partial, but tokens fit dark game UI well.

**Japan**

- **Yamada UI** — a React UI made by a Japanese developer. Similar territory to Chakra · Mantine, lighter weight, with well-built dark-mode tokens.

- **Ariakit** — Diego Haz (Brazilian but popular in the Japanese engineering community) — a Radix alternative.

**China**

- **Ant Design** — see Chapter 16.

- **TDesign** (Tencent) — modern tone between Material and Ant.

- **Arco Design** (ByteDance) — strong on design tools · business sites.

- **Semi Design** (Douyin) — modern tone, RTL supported.

The strength of regional libraries is that i18n · locale · font details (CJK characters) ship in from day one.

Chapter 23 · Selection Matrix — Which Combo for Whom

The whole thing in a single table:

|---------|---------|---------|------|

There is no single right answer. But the safe default in May 2026 is:

- **Consumer web** — Next 15 + Tailwind v4 + shadcn/ui + Radix UI.

- **Dashboards** — Next 15 + Tailwind v4 + Mantine 7, or shadcn + a few data components.

- **Enterprise** — React 18+ + MUI v6 or AntD 5.

Chapter 24 · 12 Anti-Patterns

1. **Using emotion with Tailwind v4.** There is no reason to add a single line of runtime dependency. Drop emotion as part of moving v3 → v4.

2. **Deciding to "never modify" shadcn components.** The whole model assumes you can. When the design needs to change, edit that file.

3. **Reimplementing keyboard accessibility on top of Radix Primitives.** Radix has done it. Use `asChild`, `onOpenChange`, and focus trap as given.

4. **Using Mantine 7 like v6 with emotion.** v7 is CSS Modules. Follow the migration guide and move to className patterns.

5. **Assuming Chakra v2 → v3 auto-migrates.** Nearly every component call is affected. Plan a phased migration.

6. **Dropping MUI onto a marketing site.** It projects a "Material look." For brand sites, Tailwind + shadcn is almost always better.

7. **Using AntD on an English-only project without i18n.** Without ConfigProvider locale, defaults like "ko_KR" leak in.

8. **Activating all 30 DaisyUI themes.** They all enter the bundle. Pick 2-3.

9. **Importing Open Props partially and mixing with other token libs.** Variable name collisions are painful. Pick one token source.

10. **Running UnoCSS and Tailwind in the same project.** Class conflicts · priority conflicts are common. Pick one.

11. **Mixing Sass variables and CSS variables.** Sass variables vanish at build time; CSS variables are runtime. For dynamic cases like dark mode, always CSS variables.

12. **Thinking `!important` will beat Tailwind.** Tailwind v4's `@layer utilities` already ensures correct cascade. Adjust `@layer` placement, not `!important`.

Chapter 25 · Checklist — 14 Items for a New Project

1. **Pick a CSS authoring style** — Tailwind v4 · CSS Modules · Panda · UnoCSS — pick one.

2. **Pick a component layer** — Unstyled (Radix) · Themed (shadcn) · Full (Mantine · MUI · AntD).

3. **Decide a token source** — Tailwind built-in · Open Props · Tokens Studio + Style Dictionary.

4. **Decide the dark-mode strategy** — `prefers-color-scheme` auto vs. toggle.

5. **Use container queries** — apply to cards · sidebars.

6. **Define `@layer` order** — something like `reset, base, components, utilities`.

7. **Is your CSS-in-JS zero runtime?** — Panda · Vanilla Extract · Linaria.

8. **Bundle analysis** — use `next bundle-analyzer` etc. to size CSS libs.

9. **Accessibility verification** — axe-core, Lighthouse, Storybook a11y addon.

10. **i18n · RTL planning** — handle `dir="rtl"` — leverage Tailwind v4 logical properties.

11. **Integrate the View Transitions API** — route-change animation.

12. **Build a color system with `color-mix()` and oklch** — not sRGB.

13. **Edge-case form components** — Combobox · DatePicker · MultiSelect — don't roll your own; use libraries.

14. **Visual regression in CI** — Chromatic · Percy · Playwright visual diffs.

Chapter 26 · Wrap-Up — CSS Got Interesting Again

The landscape of the early 2020s was a two-camp fight: "do I pick Tailwind, or styled-components?" 2026 is different.

- Native CSS got strong enough — container queries, `:has()`, `@layer`, View Transitions, color-mix.

- Tailwind v4 cemented its place as "the utility-first answer."

- shadcn/ui broke the equation "library == npm package."

- Radix · Ark UI set the standard for "accessibility primitives."

- Panda · Vanilla Extract paved the build-time CSS-in-JS road.

- Runtime CSS-in-JS hit its twilight.

- Regional libraries (Toss · Yamada · TDesign) raised global diversity.

These tools share one trait. **"The CSS author makes fewer decisions personally and hands more decisions to tools."** Where the tokens live, how dark mode toggles, who owns accessibility, which layer wins a cascade — 2026's tools give reasonable defaults for all of them.

> "Frameworks are not answers; they are good defaults. In an era of more good defaults, we get to decide design higher up the stack."

Next post candidates: **CSS Anchor Positioning in practice — replace Floating UI without JS**, **View Transitions API complete guide — Next 15 · Astro 5**, **Building a design token pipeline — Figma → Style Dictionary → Tailwind v4**.

— CSS Frameworks & UI Libraries 2026, fin.

References

- [Tailwind CSS Official](https://tailwindcss.com/)

- [Tailwind CSS v4.0 Release Notes](https://tailwindcss.com/blog/tailwindcss-v4)

- [Tailwind Plus (formerly Tailwind UI)](https://tailwindcss.com/plus)

- [shadcn/ui Official](https://ui.shadcn.com/)

- [Radix UI Primitives](https://www.radix-ui.com/primitives)

- [Radix Themes](https://www.radix-ui.com/themes)

- [Mantine 7 Official](https://mantine.dev/)

- [Chakra UI v3 Official](https://chakra-ui.com/)

- [HeadlessUI](https://headlessui.com/)

- [Ark UI Official](https://ark-ui.com/)

- [Park UI Official](https://park-ui.com/)

- [Open Props Official](https://open-props.style/)

- [UnoCSS Official](https://unocss.dev/)

- [Panda CSS Official](https://panda-css.com/)

- [Vanilla Extract Official](https://vanilla-extract.style/)

- [DaisyUI Official](https://daisyui.com/)

- [Flowbite Official](https://flowbite.com/)

- [HeroUI (formerly NextUI)](https://www.heroui.com/)

- [MUI Official](https://mui.com/)

- [Ant Design Official](https://ant.design/)

- [Vuetify Official](https://vuetifyjs.com/)

- [Quasar Official](https://quasar.dev/)

- [Element Plus](https://element-plus.org/)

- [PrimeReact / PrimeNG / PrimeVue](https://primereact.org/)

- [Skeleton UI (Svelte)](https://www.skeleton.dev/)

- [Bits UI (Svelte)](https://www.bits-ui.com/)

- [Solid UI](https://www.solid-ui.com/)

- [Pico CSS](https://picocss.com/)

- [Bulma](https://bulma.io/)

- [Catppuccin](https://catppuccin.com/)

- [Rose Pine](https://rosepinetheme.com/)

- [Tokyo Night](https://github.com/enkia/tokyo-night-vscode-theme)

- [Modern CSS Reset (Andy Bell)](https://piccalil.li/blog/a-more-modern-css-reset/)

- [Lightning CSS](https://lightningcss.dev/)

- [Style Dictionary](https://amzn.github.io/style-dictionary/)

- [Tokens Studio](https://tokens.studio/)

- [Toss Frontend Library](https://github.com/toss/slash)

- [Yamada UI](https://yamada-ui.com/)

- [TDesign (Tencent)](https://tdesign.tencent.com/)

- [MDN — Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)

- [MDN — View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)

- [MDN — :has() selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)

- [oklch.com — Color Picker](https://oklch.com/)