@enodo/tailwindcss-foundation

Tailwind CSS v4 design tokens: breakpoints, spacing scale, z-index layers, and typography utilities.

Requirements

Tailwind CSS v4

Installation

@import '@enodo/tailwindcss-foundation';

Or import only what you need:

@import '@enodo/tailwindcss-foundation/breakpoints';
@import '@enodo/tailwindcss-foundation/spacing';
@import '@enodo/tailwindcss-foundation/z-index';
@import '@enodo/tailwindcss-foundation/typography';

Breakpoints

Overrides Tailwind's default breakpoints.

| Token | Value | |-------|-------| | sm | 600px | | md | 1008px | | lg | 1280px |

<div class="block md:flex">...</div>

Spacing

The BBC GEL spacing scale, expressed as Tailwind spacing tokens. Space is defined in rem — not px — to remain compatible with browser text-size preferences (accessibility).

The scale is mostly multiples of 8px. Three units (su1, su3, su5) are exceptions: they exist for fine-grained component-level spacing only (e.g. padding inside a button, aligning an icon). They should not be used for page layout decisions like spacing between content regions or grid columns.

One spacing unit = one value. Avoid stacking two units to reach a size that isn't in the scale.

Spacing units define space between elements only — not dimensions. Use them for margin, padding, gap; not for width, height, or image sizes.

Full scale

| SU | Token | rem | px | Notes | |-----|-------|---------|-------|----------------------------| | 1 | 1 | 0.25rem | 4px | /!\ Component spacing only | | 2 | 2 | 0.5rem | 8px | | | 3 | 3 | 0.75rem | 12px | /!\ Component spacing only | | 4 | 4 | 1rem | 16px | | | 5 | 5 | 1.25rem | 20px | /!\ Component spacing only | | 6 | 6 | 1.5rem | 24px | | | 7 | 7 | 2rem | 32px | | | 8 | 8 | 2.5rem | 40px | | | 9 | 9 | 3rem | 48px | | | 10 | 10 | 3.5rem | 56px | | | 11 | 11 | 4rem | 64px | | | 12 | 12 | 4.5rem | 72px | | | 13 | 13 | 5rem | 80px | | | 14 | 14 | 7.5rem | 120px | | | 15 | 15 | 10rem | 160px | | | 16 | 16 | 12.5rem | 200px | |

SU 1–6 are covered by Tailwind's default scale (N × 0.25rem). This package overrides SU 7–16 only.

Usage

<!-- Page layout: multiples of 8 only -->
<section class="py-9 gap-7">...</section>

<!-- Component spacing: fine units allowed -->
<button class="px-5 py-3 gap-1">...</button>

Spacing units can vary across breakpoints — use Tailwind's responsive prefixes:

<div class="p-4 md:p-7">...</div>

Z-index

Named z-index layers via @utility z-*.

| Utility | Value | |---------------|-------| | z-hide | -1 | | z-base | 0 | | z-selected | 25 | | z-active | 50 | | z-dropdown | 1000 | | z-popover | 2000 | | z-tooltip | 3000 | | z-banner | 4000 | | z-nav | 5000 | | z-nav-fixed | 5050 | | z-modal-bg | 9000 | | z-modal | 9050 |

<nav class="z-nav">...</nav>
<div class="z-modal">...</div>

Typography

Responsive type scale based on the BBC GEL sizing system, exposed as Tailwind utilities via @utility fs-*.

Each utility sets font-size and line-height across four breakpoint groups:

| Group | Condition | Context | |-------|-----------|---------| | A | default | Feature phone | | B | width >= 320px | Smartphone | | C | width >= 600px | Tablet / touch | | D | width >= 600px + hover: hover + pointer: fine | Desktop (mouse) |

Display sizes — fs-atlas → fs-foolscap

Reserved for immersive storytelling and infographic experiences. Should not be used for standard editorial content. They have the most dramatic scaling across breakpoints.

| Utility | A (phone) | B (≥320px) | C (≥600px) | D (mouse) | |---------------|-----------|------------|------------|-----------| | fs-atlas | 78px | 96px | 192px | 140px | | fs-elephant | 60px | 78px | 156px | 116px | | fs-imperial | 50px | 64px | 124px | 96px | | fs-royal | 40px | 52px | 94px | 76px | | fs-foolscap | 32px | 40px | 72px | 56px |

Editorial sizes — fs-canon → fs-minion

| Utility | Usage | A (phone) | B (≥320px) | C (≥600px) | D (mouse) | |-------------------|-------------------------------------|-----------|------------|------------|-----------| | fs-canon | Hero or blog post title | 28px | 32px | 52px | 44px | | fs-trafalgar | Article title or section header | 20px | 24px | 36px | 32px | | fs-paragon | Primary headline on indexes | 20px | 22px | 28px | 28px | | fs-double-pica | Sub header | 20px | 20px | 26px | 24px | | fs-great-primer | Headline title or subtitle | 18px | 18px | 21px | 20px | | fs-body-copy | Article body copy only | 15px | 16px | 18px | 16px | | fs-pica | Index links, titles & headlines | 15px | 16px | 18px | 16px | | fs-long-primer | Index body copy & image captions | 15px | 15px | 15px | 14px | | fs-brevier | Timestamps and bylines | 14px | 14px | 14px | 13px | | fs-minion | Small header capitals | 12px | 12px | 13px | 12px |

<h1 class="fs-canon">Article title</h1>
<p class="fs-body-copy">Body text</p>
<time class="fs-brevier">12 Jan 2026</time>
<span class="fs-minion">Label</span>

Or with @apply in CSS:

h1 { @apply fs-canon; }
p  { @apply fs-body-copy; }