A super lightweight, utility-first CSS library built on modern CSS features. Familiar class names, zero build step, under 5KB gzipped.
Uses oklch() colors, @layer ordering, container queries, and CSS custom properties. Works with HTML, React, Vue, Svelte, Astro, or any stack.
<link rel="stylesheet" href="https://unpkg.com/the-new-css/dist/the-new-css.min.css">The New CSS is built for developers who want utility-first CSS without the complexity of a build pipeline.
Drop in a single link tag and start building. No tooling setup, no waiting for compilers. Ship fast.
Perfect for marketing pages, documentation, and content sites where every kilobyte matters.
Works with any SSR framework. No client-side runtime, no JavaScript dependency, pure CSS.
The source code is readable and uses real CSS features. Great for learning oklch(), @layer, and custom properties.
Built with oklch() colors, @layer, container queries, :has(), and CSS nesting. Real standards, not preprocessor hacks.
The full library compresses to under 5KB. That is 6x smaller than Tailwind and 4x smaller than Bootstrap CSS.
Add a <link> tag and you're done. No PostCSS, no Webpack, no config files. Works anywhere HTML works.
All design tokens are CSS custom properties. Override colors, spacing, and typography to match your brand in seconds.
Import only what you need. Each category (layout, colors, typography) is available as a standalone module.
Mobile-first breakpoints (sm/md/lg) and automatic dark mode with manual toggle support built in.
The New CSS uses @layer to organize styles into three layers: base, utilities, and variants. This means utility classes always override base styles, and responsive/state variants always override utilities. No specificity wars.
Colors, spacing, typography, shadows, and borders are defined as CSS custom properties on :root. Override any token to customize the entire library without touching the source.
All colors use the oklch() color space for perceptually uniform palettes. This means consistent lightness across hues and better dark mode transitions compared to hex or hsl.
Explore color utilities →<div class="bg-gray-100 p-6 rounded-lg shadow-md
hover:shadow-lg transition">
<h3 class="font-bold text-lg mb-2">Title</h3>
<p class="text-gray-600 text-sm">Content</p>
</div>This card uses utility classes for padding, rounded corners, shadow, and hover effects.
<div class="flex items-center gap-4">
<div class="bg-blue-500 text-white
p-4 rounded-lg font-bold">A</div>
<div class="flex-1 bg-gray-100
p-4 rounded-lg">B (flex-1)</div>
</div>| Feature | The New CSS | Tailwind | Bootstrap |
|---|---|---|---|
| Size (gzipped) | ~5KB | ~30KB+ | ~23KB |
| Build step required | No | Yes | No |
| Utility-first | Yes | Yes | Partial |
| Modern CSS | oklch, @layer, container queries | Partial | Limited |
| Dark mode | Auto + toggle | Class/media | Data attribute |
| Customizable | CSS variables | Config file | Sass/CSS variables |
<link rel="stylesheet" href="https://unpkg.com/the-new-css/dist/the-new-css.min.css">npm install the-new-css<div class="flex items-center gap-4 p-6
bg-gray-100 rounded-lg shadow">
<h2 class="text-xl font-bold">Hello World</h2>
<p class="text-gray-600">Built with The New CSS</p>
</div>Chrome and Edge 111+, Firefox 113+, and Safari 16.4+. These browsers support oklch() colors, @layer, and container queries. That covers over 95% of global browser usage.
No. Add a single <link> tag to your HTML and start using utility classes immediately. No PostCSS, no bundler, no config files. If you prefer npm, install the package and import the CSS file.
The New CSS uses similar utility class names but ships as plain CSS at under 5KB gzipped, about 6x smaller than Tailwind. There is no build step, no config file, and it is built entirely on modern CSS features like oklch() and @layer. See the full comparison.
Yes. All colors, spacing, typography, and other design tokens are CSS custom properties on :root. Override them in your own stylesheet to match your brand. Read the customization guide.
Yes. The New CSS detects the user's OS preference via prefers-color-scheme and switches automatically. You can also add a manual toggle with a data-theme attribute. Learn about dark mode.
Yes. Each category (layout, typography, colors, etc.) is available as a standalone module in the dist/modules/ directory. Import only the modules you need to reduce size even further.