20 Tailwind CSS Minimalist UI
08 / 20

All 20 in 20 Tailwind CSS Minimalist UI

  1. 01Tailwind Modular Type Scale with a Ratio Variable
  2. 02Tailwind Type Hierarchy Without Any Color Change
  3. 03Tailwind System Font Stack That Needs No Webfont
  4. 04Tailwind Optical Alignment vs Mathematical Centering
  5. 05Tailwind Spacing Scale from a Single Base Unit
  6. 06Tailwind Whitespace That Groups Instead of Separates
  7. 07Tailwind Vertical Rhythm with a Consistent Baseline
  8. 08Tailwind Minimal Layout with CSS Grid and No Divs
  9. 09Tailwind One Accent Color Restraint Budget
  10. 10Tailwind Grayscale Palette with Enough Contrast
  11. 11Tailwind Borders and Dividers You Can Actually Remove
  12. 12Tailwind Elevation Without Shadows or Gradients
  13. 13Tailwind Why Minimal Interfaces Fail Accessibility
  14. 14Tailwind Minimalist and Brutalist Side by Side
  15. 15Tailwind Minimalist Dashboard Card and Metric
  16. 16Tailwind Minimalist Product Card for Ecommerce
  17. 17Tailwind Minimalist Portfolio Project Listing
  18. 18Tailwind Minimalist Article Layout and Typography
  19. 19Tailwind Minimalist Mobile App Screen in a Frame
  20. 20Tailwind Minimalist Landing Page Section
Pure TailwindMIT licensed

Tailwind Minimal Layout with CSS Grid and No Divs

One release card, two builds. The left is a row/column div tree — fourteen elements, five of which exist only for layout. The right is an <article> with a header, two paragraphs and a list, placed by grid-areas-[...] on the parent: nine elements, zero wrappers, identical rendering, and a document outline a screen reader can navigate.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tmu-08 relative w-full min-h-svh bg-tmu08-bg font-tmu08-ui text-tmu08-ink antialiased" aria-labelledby="tmu08-title">
  <div class="absolute top-4 right-4 z-10">
    <input id="tmu08-theme" type="checkbox" class="peer sr-only">
    <label for="tmu08-theme" class="grid size-11 cursor-pointer place-items-center rounded-full border border-tmu08-line bg-tmu08-surface text-tmu08-ink-2 shadow-[0_1px_2px_rgb(0_0_0/0.06)] transition-[color,rotate] duration-300 hover:text-tmu08-ink peer-checked:rotate-180 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-tmu08-acc motion-reduce:transition-none">
      <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 4a8 8 0 0 0 0 16Z" fill="currentColor"/></svg>
      <span class="sr-only">Switch colour theme</span>
    </label>
  </div>
  <div class="mx-auto grid max-w-[74rem] gap-12 px-6 pt-20 pb-20 md:px-12">
    <header class="grid max-w-[62ch] gap-3">
      <p class="inline-flex items-center gap-2.5 font-tmu08-mono text-xs font-medium uppercase tracking-[0.14em] text-tmu08-ink-2"><span class="tabular-nums text-tmu08-acc">08</span><span aria-hidden="true" class="h-px w-6 bg-tmu08-line"></span>Markup</p>
      <h2 id="tmu08-title" class="text-[clamp(1.75rem,1.2rem+2vw,2.75rem)] font-semibold leading-[1.08] tracking-[-0.03em] text-balance">Minimal markup is part of minimal design</h2>
      <p class="text-[1.0625rem] leading-relaxed text-tmu08-ink-2 text-pretty">Identical cards. One is built from wrappers, the other from meaning &mdash; and the grid on the parent does the layout the wrappers were pretending to do.</p>
    </header>
    <div class="grid gap-6 md:grid-cols-2">
      <section aria-labelledby="tmu08-a" class="grid min-w-0 content-start gap-4 rounded-xl border border-tmu08-line bg-tmu08-surface p-5">
        <header class="flex flex-wrap items-baseline justify-between gap-2">
          <h3 id="tmu08-a" class="text-[0.8125rem] font-semibold uppercase tracking-[0.1em]">Div-heavy</h3>
          <p class="rounded-full bg-tmu08-code text-tmu08-ink-2 px-2.5 py-0.5 font-tmu08-mono text-xs">14 elements &middot; 5 wrappers</p>
        </header>
        <div class="grid min-w-0 gap-3 rounded-lg border border-tmu08-line p-5">
          <div class="grid grid-cols-[minmax(0,1fr)_auto] gap-3">
            <div class="grid min-w-0 content-start gap-0.5">
              <div class="font-tmu08-mono text-[0.6875rem] uppercase tracking-[0.1em] text-tmu08-ink-2">Release 4.2</div>
              <div class="text-lg/[1.2] font-semibold tracking-[-0.016em]">Prism Query Engine</div>
            </div>
            <div class="grid justify-items-end"><div class="font-tmu08-mono text-lg font-medium tabular-nums text-tmu08-acc">+18%</div></div>
          </div>
          <div class="grid"><div class="text-[0.9375rem] text-tmu08-ink-2 text-pretty">Cold-start latency down across all regions after the planner rewrite.</div></div>
          <div class="grid"><div class="flex flex-wrap gap-x-4 gap-y-2 border-t border-tmu08-line pt-2"><div><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Changelog</a></div><div><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Migration notes</a></div><div><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Benchmarks</a></div></div></div>
        </div>
        <pre class="min-w-0 overflow-x-auto rounded-lg border border-tmu08-line bg-tmu08-code p-3.5 font-tmu08-mono text-xs leading-[1.6] text-tmu08-ink-2"><code class="whitespace-pre">&lt;div class="card"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col"&gt;&hellip;&lt;/div&gt;
    &lt;div class="col end"&gt;&hellip;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;&hellip;&lt;/div&gt;
&lt;/div&gt;</code></pre>
      </section>
      <section aria-labelledby="tmu08-b" class="grid min-w-0 content-start gap-4 rounded-xl border border-tmu08-acc bg-tmu08-surface p-5">
        <header class="flex flex-wrap items-baseline justify-between gap-2">
          <h3 id="tmu08-b" class="text-[0.8125rem] font-semibold uppercase tracking-[0.1em]">Semantic</h3>
          <p class="rounded-full bg-tmu08-acc text-tmu08-acc-ink px-2.5 py-0.5 font-tmu08-mono text-xs">9 elements &middot; 0 wrappers</p>
        </header>
        <article class="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-3 rounded-lg border border-tmu08-line p-5 [grid-template-areas:'head_stat'_'text_text'_'links_links']">
          <header class="grid min-w-0 gap-0.5 [grid-area:head]">
            <p class="font-tmu08-mono text-[0.6875rem] uppercase tracking-[0.1em] text-tmu08-ink-2">Release 4.2</p>
            <h4 class="text-lg/[1.2] font-semibold tracking-[-0.016em]">Prism Query Engine</h4>
          </header>
          <p class="justify-self-end font-tmu08-mono text-lg font-medium tabular-nums text-tmu08-acc [grid-area:stat]">+18%</p>
          <p class="text-[0.9375rem] text-tmu08-ink-2 text-pretty [grid-area:text]">Cold-start latency down across all regions after the planner rewrite.</p>
          <ul class="flex flex-wrap gap-x-4 gap-y-2 border-t border-tmu08-line pt-2 [grid-area:links]"><li><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Changelog</a></li><li><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Migration notes</a></li><li><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Benchmarks</a></li></ul>
        </article>
        <pre class="min-w-0 overflow-x-auto rounded-lg border border-tmu08-line bg-tmu08-code p-3.5 font-tmu08-mono text-xs leading-[1.6] text-tmu08-ink-2"><code class="whitespace-pre">&lt;article class="grid [grid-template-areas:…]"&gt;
  &lt;header class="[grid-area:head]"&gt;&hellip;&lt;/header&gt;
  &lt;p class="[grid-area:stat]"&gt;&hellip;&lt;/p&gt;
  &lt;p class="[grid-area:text]"&gt;&hellip;&lt;/p&gt;
  &lt;ul class="[grid-area:links]"&gt;&hellip;&lt;/ul&gt;
&lt;/article&gt;</code></pre>
      </section>
    </div>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tmu08-bg: light-dark(#eceef0, #101315);
  --color-tmu08-bg: light-dark(oklch(94% 0.004 240), oklch(17.5% 0.006 250));
  --color-tmu08-surface: light-dark(#ffffff, #191d20);
  --color-tmu08-surface: light-dark(oklch(100% 0 0), oklch(23% 0.007 250));
  --color-tmu08-code: light-dark(#f4f6f7, #12171a);
  --color-tmu08-code: light-dark(oklch(97% 0.003 240), oklch(19.5% 0.008 250));
  --color-tmu08-ink: light-dark(#16191c, #eef1f3);
  --color-tmu08-ink: light-dark(oklch(20% 0.008 250), oklch(95.5% 0.004 250));
  --color-tmu08-ink-2: light-dark(#4d565e, #a4adb4);
  --color-tmu08-ink-2: light-dark(oklch(44% 0.014 250), oklch(74% 0.01 250));
  --color-tmu08-line: light-dark(#ccd2d7, #333b41);
  --color-tmu08-line: light-dark(oklch(85% 0.007 250), oklch(33% 0.011 250));
  --color-tmu08-acc: light-dark(#0f5f8f, #6fbde8);
  --color-tmu08-acc: light-dark(oklch(45% 0.11 240), oklch(78% 0.1 235));
  --color-tmu08-acc-ink: light-dark(#ffffff, #0e1116);
  --color-tmu08-acc-ink: light-dark(oklch(100% 0 0), oklch(17% 0.01 250));
  --font-tmu08-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-tmu08-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
/* Root rule: the full-bleed contract, restated so the stage is sized before the browser build
   compiles. color-scheme drives every light-dark() token above. */

.tmu-08 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  color-scheme: light dark;
}
/* Theme toggle: flip the scheme and every token follows. Mirrored for a dark OS. */

.tmu-08:has(#tmu08-theme:checked) {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  .tmu-08:has(#tmu08-theme:checked) {
    color-scheme: light;
  }
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tmu08-bg: light-dark(#eceef0, #101315);
  --color-tmu08-bg: light-dark(oklch(94% 0.004 240), oklch(17.5% 0.006 250));
  --color-tmu08-surface: light-dark(#ffffff, #191d20);
  --color-tmu08-surface: light-dark(oklch(100% 0 0), oklch(23% 0.007 250));
  --color-tmu08-code: light-dark(#f4f6f7, #12171a);
  --color-tmu08-code: light-dark(oklch(97% 0.003 240), oklch(19.5% 0.008 250));
  --color-tmu08-ink: light-dark(#16191c, #eef1f3);
  --color-tmu08-ink: light-dark(oklch(20% 0.008 250), oklch(95.5% 0.004 250));
  --color-tmu08-ink-2: light-dark(#4d565e, #a4adb4);
  --color-tmu08-ink-2: light-dark(oklch(44% 0.014 250), oklch(74% 0.01 250));
  --color-tmu08-line: light-dark(#ccd2d7, #333b41);
  --color-tmu08-line: light-dark(oklch(85% 0.007 250), oklch(33% 0.011 250));
  --color-tmu08-acc: light-dark(#0f5f8f, #6fbde8);
  --color-tmu08-acc: light-dark(oklch(45% 0.11 240), oklch(78% 0.1 235));
  --color-tmu08-acc-ink: light-dark(#ffffff, #0e1116);
  --color-tmu08-acc-ink: light-dark(oklch(100% 0 0), oklch(17% 0.01 250));
  --font-tmu08-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-tmu08-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
/* Root rule: the full-bleed contract, restated so the stage is sized before the browser build
   compiles. color-scheme drives every light-dark() token above. */

.tmu-08 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  color-scheme: light dark;
}
/* Theme toggle: flip the scheme and every token follows. Mirrored for a dark OS. */

.tmu-08:has(#tmu08-theme:checked) {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  .tmu-08:has(#tmu08-theme:checked) {
    color-scheme: light;
  }
}

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • grid-template-areas has no first-class utility in v4, so it is an arbitrary property — the idiomatic answer, because area names are markup-specific, not a design-scale value.
  • The CSS original needed four child selectors (.semantic > header { grid-area: head }…); each became an arbitrary property on the child itself.
  • UI upgrade: the element-count caption became a filled pill on the semantic panel, and link underlines fade in rather than snapping, which reads as a hover even on high-DPI screens where a 1px border was easy to miss.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Minimal Layout with CSS Grid and No Divs
Source: https://codefronts.com/design-styles/tailwind-css-minimalist-ui/tailwind-semantic-html-css-grid-no-divs/

One release card, two builds. The left is a row/column div tree &mdash; fourteen elements, five of which exist only for layout. The right is an <article> with a header, two paragraphs and a list, placed by grid-areas-[...] on the parent: nine elements, zero wrappers, identical rendering, and a document outline a screen reader can navigate.
## HTML
```html
<section class="tmu-08 relative w-full min-h-svh bg-tmu08-bg font-tmu08-ui text-tmu08-ink antialiased" aria-labelledby="tmu08-title">
  <div class="absolute top-4 right-4 z-10">
    <input id="tmu08-theme" type="checkbox" class="peer sr-only">
    <label for="tmu08-theme" class="grid size-11 cursor-pointer place-items-center rounded-full border border-tmu08-line bg-tmu08-surface text-tmu08-ink-2 shadow-[0_1px_2px_rgb(0_0_0/0.06)] transition-[color,rotate] duration-300 hover:text-tmu08-ink peer-checked:rotate-180 peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-tmu08-acc motion-reduce:transition-none">
      <svg class="size-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M12 4a8 8 0 0 0 0 16Z" fill="currentColor"/></svg>
      <span class="sr-only">Switch colour theme</span>
    </label>
  </div>
  <div class="mx-auto grid max-w-[74rem] gap-12 px-6 pt-20 pb-20 md:px-12">
    <header class="grid max-w-[62ch] gap-3">
      <p class="inline-flex items-center gap-2.5 font-tmu08-mono text-xs font-medium uppercase tracking-[0.14em] text-tmu08-ink-2"><span class="tabular-nums text-tmu08-acc">08</span><span aria-hidden="true" class="h-px w-6 bg-tmu08-line"></span>Markup</p>
      <h2 id="tmu08-title" class="text-[clamp(1.75rem,1.2rem+2vw,2.75rem)] font-semibold leading-[1.08] tracking-[-0.03em] text-balance">Minimal markup is part of minimal design</h2>
      <p class="text-[1.0625rem] leading-relaxed text-tmu08-ink-2 text-pretty">Identical cards. One is built from wrappers, the other from meaning &mdash; and the grid on the parent does the layout the wrappers were pretending to do.</p>
    </header>
    <div class="grid gap-6 md:grid-cols-2">
      <section aria-labelledby="tmu08-a" class="grid min-w-0 content-start gap-4 rounded-xl border border-tmu08-line bg-tmu08-surface p-5">
        <header class="flex flex-wrap items-baseline justify-between gap-2">
          <h3 id="tmu08-a" class="text-[0.8125rem] font-semibold uppercase tracking-[0.1em]">Div-heavy</h3>
          <p class="rounded-full bg-tmu08-code text-tmu08-ink-2 px-2.5 py-0.5 font-tmu08-mono text-xs">14 elements &middot; 5 wrappers</p>
        </header>
        <div class="grid min-w-0 gap-3 rounded-lg border border-tmu08-line p-5">
          <div class="grid grid-cols-[minmax(0,1fr)_auto] gap-3">
            <div class="grid min-w-0 content-start gap-0.5">
              <div class="font-tmu08-mono text-[0.6875rem] uppercase tracking-[0.1em] text-tmu08-ink-2">Release 4.2</div>
              <div class="text-lg/[1.2] font-semibold tracking-[-0.016em]">Prism Query Engine</div>
            </div>
            <div class="grid justify-items-end"><div class="font-tmu08-mono text-lg font-medium tabular-nums text-tmu08-acc">+18%</div></div>
          </div>
          <div class="grid"><div class="text-[0.9375rem] text-tmu08-ink-2 text-pretty">Cold-start latency down across all regions after the planner rewrite.</div></div>
          <div class="grid"><div class="flex flex-wrap gap-x-4 gap-y-2 border-t border-tmu08-line pt-2"><div><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Changelog</a></div><div><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Migration notes</a></div><div><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Benchmarks</a></div></div></div>
        </div>
        <pre class="min-w-0 overflow-x-auto rounded-lg border border-tmu08-line bg-tmu08-code p-3.5 font-tmu08-mono text-xs leading-[1.6] text-tmu08-ink-2"><code class="whitespace-pre">&lt;div class="card"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col"&gt;&hellip;&lt;/div&gt;
    &lt;div class="col end"&gt;&hellip;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;&hellip;&lt;/div&gt;
&lt;/div&gt;</code></pre>
      </section>
      <section aria-labelledby="tmu08-b" class="grid min-w-0 content-start gap-4 rounded-xl border border-tmu08-acc bg-tmu08-surface p-5">
        <header class="flex flex-wrap items-baseline justify-between gap-2">
          <h3 id="tmu08-b" class="text-[0.8125rem] font-semibold uppercase tracking-[0.1em]">Semantic</h3>
          <p class="rounded-full bg-tmu08-acc text-tmu08-acc-ink px-2.5 py-0.5 font-tmu08-mono text-xs">9 elements &middot; 0 wrappers</p>
        </header>
        <article class="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-3 rounded-lg border border-tmu08-line p-5 [grid-template-areas:'head_stat'_'text_text'_'links_links']">
          <header class="grid min-w-0 gap-0.5 [grid-area:head]">
            <p class="font-tmu08-mono text-[0.6875rem] uppercase tracking-[0.1em] text-tmu08-ink-2">Release 4.2</p>
            <h4 class="text-lg/[1.2] font-semibold tracking-[-0.016em]">Prism Query Engine</h4>
          </header>
          <p class="justify-self-end font-tmu08-mono text-lg font-medium tabular-nums text-tmu08-acc [grid-area:stat]">+18%</p>
          <p class="text-[0.9375rem] text-tmu08-ink-2 text-pretty [grid-area:text]">Cold-start latency down across all regions after the planner rewrite.</p>
          <ul class="flex flex-wrap gap-x-4 gap-y-2 border-t border-tmu08-line pt-2 [grid-area:links]"><li><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Changelog</a></li><li><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Migration notes</a></li><li><a href="#tmu08-title" class="inline-flex min-h-11 items-center gap-1 text-sm font-medium text-tmu08-acc underline decoration-transparent underline-offset-4 transition-[text-decoration-color] duration-150 hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tmu08-acc motion-reduce:transition-none">Benchmarks</a></li></ul>
        </article>
        <pre class="min-w-0 overflow-x-auto rounded-lg border border-tmu08-line bg-tmu08-code p-3.5 font-tmu08-mono text-xs leading-[1.6] text-tmu08-ink-2"><code class="whitespace-pre">&lt;article class="grid [grid-template-areas:…]"&gt;
  &lt;header class="[grid-area:head]"&gt;&hellip;&lt;/header&gt;
  &lt;p class="[grid-area:stat]"&gt;&hellip;&lt;/p&gt;
  &lt;p class="[grid-area:text]"&gt;&hellip;&lt;/p&gt;
  &lt;ul class="[grid-area:links]"&gt;&hellip;&lt;/ul&gt;
&lt;/article&gt;</code></pre>
      </section>
    </div>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tmu08-bg: light-dark(#eceef0, #101315);
  --color-tmu08-bg: light-dark(oklch(94% 0.004 240), oklch(17.5% 0.006 250));
  --color-tmu08-surface: light-dark(#ffffff, #191d20);
  --color-tmu08-surface: light-dark(oklch(100% 0 0), oklch(23% 0.007 250));
  --color-tmu08-code: light-dark(#f4f6f7, #12171a);
  --color-tmu08-code: light-dark(oklch(97% 0.003 240), oklch(19.5% 0.008 250));
  --color-tmu08-ink: light-dark(#16191c, #eef1f3);
  --color-tmu08-ink: light-dark(oklch(20% 0.008 250), oklch(95.5% 0.004 250));
  --color-tmu08-ink-2: light-dark(#4d565e, #a4adb4);
  --color-tmu08-ink-2: light-dark(oklch(44% 0.014 250), oklch(74% 0.01 250));
  --color-tmu08-line: light-dark(#ccd2d7, #333b41);
  --color-tmu08-line: light-dark(oklch(85% 0.007 250), oklch(33% 0.011 250));
  --color-tmu08-acc: light-dark(#0f5f8f, #6fbde8);
  --color-tmu08-acc: light-dark(oklch(45% 0.11 240), oklch(78% 0.1 235));
  --color-tmu08-acc-ink: light-dark(#ffffff, #0e1116);
  --color-tmu08-acc-ink: light-dark(oklch(100% 0 0), oklch(17% 0.01 250));
  --font-tmu08-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-tmu08-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
/* Root rule: the full-bleed contract, restated so the stage is sized before the browser build
   compiles. color-scheme drives every light-dark() token above. */

.tmu-08 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  color-scheme: light dark;
}
/* Theme toggle: flip the scheme and every token follows. Mirrored for a dark OS. */

.tmu-08:has(#tmu08-theme:checked) {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  .tmu-08:has(#tmu08-theme:checked) {
    color-scheme: light;
  }
}
```

How this works

A wrapper that exists only to position something is a layout decision leaking into the document. Grid removed the need for most of them: a grid container positions its children directly, so the element that is the card can also be the thing that lays the card out. The left-hand version below uses five extra <div> elements; the right-hand version uses none, and they render identically.

The win is not byte count, it is legibility. A DOM made of <article>, <header>, <h3>, <ul> and <a> tells a screen reader, a search crawler, a reader-mode extension and the next developer what the content is. A DOM made of <div class="row"> and <div class="col"> tells them nothing, and every one of those consumers has to guess.

display: contents is the escape hatch. Sometimes an element must exist for semantics — a <ul> around list items, a <fieldset> around inputs — but you want its children to participate in the grandparent’s grid. display: contents removes the box while keeping the element in the tree. Use it deliberately: it also removes the element’s background, border and padding, and in some engine versions it has affected the accessibility mapping of table and list roles, so test with a screen reader rather than assuming.

When a wrapper genuinely is needed. Three honest cases: a scroll container needs its own box; a background, border or overflow clip needs an element to paint on; and a transform or containment boundary needs a box to create. If your wrapper does one of those, keep it — but give it a name that says what it does, not where it sits. <div class="mu-08__scroller"> is fine. <div class="wrapper-inner-2"> is a confession.

Make it yours

  • Swap the areas for a stacked mobile layout with max-sm:[grid-template-areas:'head'_'stat'_'text'_'links'].
  • Promote the stat by moving its area to the top row alone: 'stat_stat'_'head_head'.
  • Delete the code blocks for a production version; they are teaching aids only.

Gotchas — read before shipping

  • display: contents removes the element's box, so any background, border, padding or overflow on it silently stops applying.
  • Applying grid to a <ul> without resetting list-style and padding leaves markers floating in the first track on some engines.
  • Removing wrappers is not a goal in itself. A scroll container, a paint surface and a containment boundary all genuinely need a box — deleting those creates real bugs.
  • Naming grid areas after visual positions (top-left) reintroduces exactly the problem you removed. Name them after content roles (meta, actions).

Browser support

ChromeSafariFirefoxEdge
123+17.5+128+123+

The floor is set by light-dark() on the colour tokens (Chrome 123 / Safari 17.5 / Firefox 120) and by Tailwind v4's own generated sheet (cascade layers, @property, color-mix()). The technique itself works far further back.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗:focus-visibletw ↗

Arbitraryneeds bracket syntax

light-dark()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →