Documentation
Welcome to the complete documentation for The New CSS, a utility-first CSS library that ships under 5KB gzipped with no build step required. These docs cover everything you need to install the library, learn the utility class system, build responsive layouts, enable dark mode, and customize design tokens to match your project.
The New CSS is built entirely on modern CSS standards including oklch() colors for perceptually uniform palettes, @layer for predictable specificity ordering, CSS custom properties for theming, and container queries for component-level responsiveness. Whether you are prototyping a quick landing page or building a production application, these docs will help you get the most out of every utility class.
Getting Started
New to The New CSS? Start here. The getting started guide walks you through installation via CDN or npm, explains the core concepts behind utility-first CSS, introduces the three CSS layer system (base, utilities, variants), and shows you how design tokens work as CSS custom properties. You will be up and running in under a minute.
Read the getting started guide →Utility Reference
The New CSS provides a comprehensive set of single-purpose utility classes organized by category. Each utility maps to one or two CSS properties, making it easy to predict what a class does just by reading its name. Browse the reference pages below to see every available class, its CSS output, and live examples.
Layout
Control display, position, overflow, visibility, and z-index. Build page structures with block, inline, flex, and grid display utilities.
Flexbox
Align and distribute space among items in a container. Direction, wrapping, justification, alignment, grow, shrink, and order utilities.
Grid
Create two-dimensional layouts with CSS Grid. Define columns, rows, gaps, and control how items span across grid tracks.
Spacing
Margin and padding utilities using a consistent spacing scale. Includes directional variants for top, right, bottom, left, inline, and block.
Sizing
Set width, height, min-width, min-height, max-width, and max-height. Includes fractional widths, viewport units, and container-based sizes.
Typography
Font size, weight, style, line height, letter spacing, text alignment, decoration, and transform utilities for complete text control.
Colors
Text color, background color, and gradient utilities. All colors use the oklch() color space for perceptually uniform palettes.
Borders
Border width, color, style, and radius utilities. Includes ring utilities for focus outlines and divide utilities for child separators.
Effects
Box shadow, opacity, and transition utilities. Add depth with shadows, control transparency, and animate property changes smoothly.
Features
Beyond the core utility classes, The New CSS includes built-in support for responsive design, dark mode, and full customization through CSS custom properties. These features work without any JavaScript runtime or build tooling. Learn how to use breakpoint prefixes for adaptive layouts, enable automatic or manual dark mode switching, and override design tokens to create a custom theme that fits your brand.
Responsive Design
Mobile-first breakpoint system with sm, md, and lg prefixes. Apply any utility conditionally at different screen sizes.
Dark Mode
Automatic dark mode via prefers-color-scheme and manual toggle via data-theme attribute. Works out of the box with zero configuration.
Customization
Override CSS custom properties on :root to change colors, spacing, typography, shadows, and more. No build step or config file needed.
How the Docs Are Organized
Each documentation page follows a consistent structure. You will find a description of the utility category, a reference table listing every class and its CSS output, and live rendered examples with copy-ready code snippets. The responsive design and dark mode pages also include interactive demos so you can see behavior changes in real time.
The utility classes in The New CSS use familiar naming conventions. If you have used Tailwind CSS or similar frameworks, you will feel right at home. Classes like flex, p-4, text-gray-600, and rounded-lg work exactly as you would expect. The key difference is that The New CSS ships as plain CSS with no build step, no configuration file, and no JavaScript dependency.
All source CSS is organized into three layers declared via @layer: base for resets and element defaults, utilities for all the single-purpose classes, and variants for responsive breakpoints, hover and focus states, and dark mode overrides. This layering ensures that your own custom styles always take priority over library styles without needing to fight specificity.