Open Props is a collection of CSS variables for colour, typography, shadows, and layout. Import the bundle, use the props, and keep your own components small.

It is a strong fit when you want token consistency on a page that does not justify Tailwind's build pipeline.

I recommend Open Props for prototypes, static pages, and side projects where a token layer helps but utilities would be overkill.

Quick start

<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css">
<link rel="stylesheet" href="https://unpkg.com/open-props/open-props.min.css">

Use var(--font-sans), var(--surface-2), and friends in your own classes.

With PostCSS

Import open-props in your entry CSS and enable @custom-media if you want the optional media queries pack.

Strengths

Tiny surface area, works without a bundler, excellent defaults, easy to theme with one :root override.

Weaknesses

You still write component CSS. No layout system out of the box. Less team familiarity than Tailwind.

Pros

Drop-in tokens
Great for experiments
Plays nicely with plain CSS and PostCSS

Cons

Not a replacement for a component library
Naming takes a minute to learn
You own responsive patterns

Versus

Pick Open Props over Tailwind CSS when the page is small and you want tokens, not utilities. Pair either with connor-site-css patterns on this site.