# Modern CSS in 2026 — Tailwind v4, Open Props, and CUBE CSS Architecture ## The landscape today **No single answer.** Small marketing site? Vanilla CSS. Product UI with a team? Tailwind or CUBE. Design system? Open Props. ## Tailwind v4 — what's new Released 2024, production-ready 2026: - **Instant build** — Rust-powered compiler, 5-10× faster than v3 - **Zero config for most projects** — no `tailwind.config.js` needed, works with `@import "tailwindcss"` - **CSS-first configuration** — customise in CSS, not JS config file - **Container queries** built in - **Auto content detection** — scans your HTML/JS/TS without the `content:` array - **Native CSS cascade layers** used for predictable specificity ### Setup (Vite project) ```bash npm install tailwindcss @tailwindcss/vite ``` `vite.config.ts`: ```typescript import tailwindcss from '@tailwindcss/vite'; export default { plugins: [tailwindcss()], }; ``` `src/app.css`: ```css @import "tailwindcss"; /* Customise inline — no separate config file */ @theme { --color-brand-50: oklch(0.98 0.02 260); --color-brand-500: oklch(0.6 0.2 260); --color-brand-900: oklch(0.2 0.1 260); --font-sans: "Inter", sans-serif; --spacing: 0.25rem; /* default spacing unit */ } ``` Use in HTML: ```html Click ``` ### v4 migration from v3 ```bash npx @tailwindcss/upgrade@next ``` Automates 90% of changes. Manual fixes: - `ring` utilities now default to 1px (was 3px) - `bg-opacity-*` → use `bg-black/50` syntax - `space-y-4` alternative: `flex-col gap-4` ## Open Props — design tokens as CSS variables Open Props is just a CSS file with 500+ variables. No build step, no framework, works anywhere. ```bash npm install open-props # or via CDN ``` ```css @import "open-props/style"; @import "open-props/normalize"; .card { background: var(--surface-2); padding: var(--size-fluid-3); border-radius: var(--radius-3); box-shadow: var(--shadow-3); color: var(--text-1); } .button { background: var(--blue-6); color: white; padding: var(--size-2) var(--size-4); border-radius: var(--radius-2); transition: background var(--ease-3) 150ms; } .button:hover { background: var(--blue-7); } ``` Includes: - Colors (2500+ hues, dark mode ready) - Spacing (t-shirt sizes + fluid) - Shadows - Border radius - Animations + easings - Gradients - Media queries (`var(--md)` etc.) No class pollution — just tokens. Pair with your own selectors or other frameworks. ## CUBE CSS — architecture without framework CUBE = Composition, Utility, Block, Exception. A methodology, not a library. ### The four layers 1. **Composition** — global layout rules (macro level) 2. **Utility** — single-purpose classes for small adjustments 3. **Block** — named components with their own styles 4. **Exception** — rare one-off overrides via data-attributes ### Example folder structure ``` styles/ ├── composition/ │ ├── stack.css /* vertical rhythm */ │ ├── cluster.css /* horizontal groups */ │ ├── sidebar.css /* content + sidebar layout */ ├── utilities/ │ ├── color.css │ ├── text.css │ ├── spacing.css ├── blocks/ │ ├── card.css │ ├── nav.css │ ├── form.css ├── exceptions/ /* data-state overrides */ ├── tokens.css /* CSS custom properties */ └── main.css /* imports all */ ``` ### Stack (composition primitive) ```css .stack { display: flex; flex-direction: column; justify-content: flex-start; } .stack > * + * { margin-block-start: var(--space-m); } ``` ```html

Welcome

Article content…

Read more

``` Every direct child gets consistent spacing. No per-component margin tweaks. ### Block (component) ```css .card { background: var(--surface-2); padding: var(--space-m); border-radius: var(--radius-3); } .card__title { font-size: var(--font-size-3); font-weight: 600; } .card__body { color: var(--color-text-2); } ``` ### Exception (state overrides) ```css [data-state="open"] { display: block; } [data-state="closed"] { display: none; } [data-loading="true"] .card { opacity: 0.5; pointer-events: none; } ``` ## Modern CSS features worth using in 2026 ### Container queries ```css .card-grid { container-type: inline-size; } .card { padding: var(--space-s); } @container (min-width: 600px) { .card { display: grid; grid-template-columns: 150px 1fr; padding: var(--space-m); } } ``` Responsive based on parent size, not viewport. Killer for reusable components. ### :has() — parent selection ```css form:has(:invalid) button[type="submit"] { opacity: 0.5; pointer-events: none; } ``` ### CSS nesting (native) ```css .card { padding: var(--space-m); & h2 { font-size: var(--font-size-3); } &:hover { transform: translateY(-2px); } } ``` No preprocessor needed. ### `color-mix()` and oklch ```css :root { --brand: oklch(0.6 0.2 260); --brand-lighter: color-mix(in oklch, var(--brand) 70%, white); } ``` oklch gives perceptually-uniform colors — no more "muddy" gradients. ### `@scope` (limited support 2026) ```css @scope (.card) { h2 { color: var(--brand); } } ``` Styles only apply inside the scope. Cleaner than BEM for component isolation. ## Which to choose? ## Migration tips ### From Bootstrap → Tailwind - Replace grid classes: `col-md-6` → `md:w-1/2` - Forms: use `@tailwindcss/forms` plugin - Components: build your own; copy from [ui.shadcn.com](https://ui.shadcn.com) (free) ### From CSS-in-JS → vanilla + tokens - Extract colors, spacing, fonts to CSS variables - Move component styles to CSS files - Tree-shake styled-components/emotion packages ## Common pitfalls ## FAQ