Use plain CSS before adding a CSS framework

Cost

Open source. CSS is an open web standard with no licence fee. Tailwind CSS is MIT licensed.

How to do it

CSS is a W3C standard, so it passes every test with no dependency, no upgrade and no licence. Browsers now support nesting, custom properties and cascade layers, which once needed a tool. Keep colours and sizes as named design tokens. Choose something else when the team already uses Tailwind CSS, which passes the tests too. Its 1.0 came out in May 2019, version 4.3.3 shipped in July 2026, and it has an MIT licence with about 85 million weekly downloads.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

CSS example

:root { --color-action: #2347d6; --space-m: 1rem; }

.order-card {
  padding: var(--space-m);
  & .order-card-button { background: var(--color-action); }
}

JavaScript example

import { readFileSync } from 'node:fs';

const HEX_COLOUR = /#[0-9a-f]{3,8}\b/i;
export const coloursOutsideTokens = file =>
  readFileSync(file, 'utf8').split('\n').filter(line => HEX_COLOUR.test(line) && !line.trim().startsWith('--'));

Python example

import re

HEX_COLOUR = re.compile(r"#[0-9a-fA-F]{3,8}\b")

def colours_outside_tokens(path: str) -> list[str]:
    return [line for line in open(path) if HEX_COLOUR.search(line) and not line.strip().startswith("--")]

How to check

The project has at most one CSS tool in package.json, and every colour value in the stylesheets is a custom property defined in one file.

Sources

• W3C CSS current work
• Tailwind CSS

Related rules

• Take every style value from design tokens in App interface