Getting Started

Installation

CDN (Recommended)

Add this single line to your HTML <head>:

<link rel="stylesheet" href="/the-new-css.css">

npm

npm install the-new-css

Then import in your CSS or HTML:

@import 'the-new-css/dist/the-new-css.min.css';

Download

Download the-new-css.min.css from the GitHub releases page and include it in your project.

Basic Concepts

Utility-First

The New CSS provides single-purpose utility classes that you compose directly in your HTML. Instead of writing custom CSS, combine utilities:

<div class="flex items-center gap-4 p-6 bg-gray-100 rounded-lg shadow">
  <h2 class="text-xl font-bold">Hello</h2>
  <p class="text-gray-600">World</p>
</div>

CSS Layers (@layer)

The New CSS uses @layer to organize styles. The layer order is:

base - Reset and element defaults
utilities - All utility classes
variants - Responsive, hover, focus, dark mode

Your custom styles in a higher layer (or no layer) will always win over utility classes.

Design Tokens

Colors, spacing, typography, and other values are defined as CSS custom properties. Override them to customize the library:

:root {
  --color-blue-500: oklch(0.6 0.2 250);
  --font-sans: "Inter", system-ui, sans-serif;
  --radius-lg: 0.75rem;
}

Browser Support

The New CSS uses modern CSS features. It works in all major evergreen browsers:

Chrome/Edge 111+
Firefox 113+
Safari 16.4+