Override Tailwind with fluid CSS

Tailwind's spacing and font-size scale is static — one value per breakpoint. Point that scale at EVA CSS variables instead, and every utility class becomes fluid for free.

What you need

EVA in variables-only mode

$build-class: false

Compile EVA CSS with utility classes disabled — you only want the generated var(--XX) custom properties, Tailwind keeps generating the classes.

tailwind.config.js access

theme.extend

You'll map spacing, fontSize and colors to var(--XX) instead of static rem values.

A build step before Tailwind

PostCSS / Vite / CLI

The compiled EVA stylesheet must load before Tailwind's own output so the custom properties already exist when utilities reference them.

Workflow

Step 1

Compile EVA variables

Same sizes/font-sizes list as any EVA project, but $build-class: false — output is a lean :root block of var(--XX) and OKLCH color variables.

@use 'eva-css-fluid' with (
  $sizes: (4, 8, 16, 32, 64, 128),
  $font-sizes: (14, 16, 20, 24, 32),
  $build-class: false
);

Step 2

Load it before Tailwind

Import the compiled file ahead of @tailwind base in your CSS entry so the variables are already defined.

@import "./eva-vars.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 3

Extend the theme

In tailwind.config.js, point spacing, fontSize and colors at the matching var(--XX) instead of static values.

// tailwind.config.js
theme: {
  extend: {
    spacing: { 16: 'var(--16)', 32: 'var(--32)' },
    fontSize: { base: 'var(--fs-16)', xl: 'var(--fs-24)' },
    colors: { brand: 'var(--brand)', accent: 'var(--accent)' }
  }
}

Step 4

Use Tailwind as usual

p-16, text-base, bg-brand now resolve to EVA's clamp() values — no md:/lg: variants needed for that property.

<div class="p-16 text-base bg-brand">

Step 5

One-offs via arbitrary values

For a value outside your config, Tailwind's bracket syntax reaches EVA vars directly — no config edit required.

<div class="w-[var(--220)] text-[var(--fs-36)]">

Step 6

Recompile on change

Add a size to $sizes, recompile EVA, then reference it — from tailwind.config or straight from an arbitrary value.

npx sass --load-path=node_modules styles/eva-vars.scss:styles/eva-vars.css

Important rules

Rule 1

EVA owns the scale

Tailwind config values are always var(--XX), never a static rem or px.

Rule 2

Load order matters

The EVA stylesheet must be imported before Tailwind's utilities are generated, or the variables resolve to nothing.

Rule 3

Drop redundant breakpoints

Once a utility is driven by a fluid var, delete the sm:/md:/lg: variants for that property.

Rule 4

Keep $sizes lean

Only list the sizes actually referenced in tailwind.config.js or in arbitrary values.