Frequently Asked Questions

Find answers to common questions about The New CSS. If your question is not listed here, feel free to open an issue on GitHub.

General

What is The New CSS?
The New CSS is a utility-first CSS library that ships as plain CSS with no build step required. It uses modern CSS features like oklch() colors, @layer, CSS custom properties, and container queries while staying under 5KB gzipped.
Is The New CSS free to use?
Yes, The New CSS is completely free and open source. You can use it in personal and commercial projects without any cost.
What license does it use?
The New CSS is released under the MIT License. This means you can use, modify, and distribute it freely in any project.
Who maintains The New CSS?
The New CSS is maintained by the open-source community. Contributions, bug reports, and feature requests are welcome on GitHub.

Installation & Setup

How do I install The New CSS?
The easiest way is via CDN — just add a single <link> tag to your HTML <head>. You can also install it with npm or download the CSS file directly. See the Getting Started guide for full details.
Do I need a build step?
No. The New CSS ships as plain CSS that works directly in the browser. There is no JavaScript compilation, no PostCSS plugins, and no CLI tool required. Just link the stylesheet and start using utility classes.
Can I use it with React/Vue/Svelte?
Absolutely. Since The New CSS is plain CSS, it works with any framework or library. Just include the stylesheet and apply utility classes to your components the same way you would in plain HTML.
Can I install it via npm?
Yes. Run npm install the-new-css, then import the CSS in your project with @import "the-new-css/dist/the-new-css.min.css". Check the Getting Started guide for more details.
How do I use only specific modules?
The New CSS provides individual module files in dist/modules/. You can import only the modules you need, such as spacing, typography, or colors, to keep your CSS even smaller. See the Customization page for guidance.

Features

What modern CSS features does it use?
The New CSS leverages oklch() for perceptually uniform colors, @layer for style organization, CSS custom properties (variables) for design tokens, and container queries for component-level responsive design.
How does dark mode work?
Dark mode works by inverting the gray color scale tokens. It activates automatically via prefers-color-scheme, or manually with a data-theme="dark" attribute. No extra dark-prefixed classes are needed. Learn more on the Dark Mode page.
Are responsive breakpoints included?
Yes. The New CSS includes sm, md, and lg breakpoints as responsive variants. Use them with escaped-colon prefixes in your HTML, such as md:flex or lg:grid-cols-3. See the Responsive docs for all available breakpoints.
Can I customize the design tokens?
Yes. All design tokens are CSS custom properties on :root. Override any token in your own stylesheet to customize colors, spacing, typography, shadows, and more. Visit the Customization page for examples.
What color space does it use?
The New CSS uses the oklch() color space throughout. oklch provides perceptually uniform lightness, making it easier to create consistent and accessible color palettes. Learn more on the Colors page.

Comparison

How does it compare to Tailwind CSS?
Unlike Tailwind, The New CSS requires no build step, no configuration file, and no JavaScript tooling. It ships as a single plain CSS file under 5KB gzipped. Tailwind is more comprehensive but requires a build pipeline; The New CSS prioritizes simplicity and zero-config usage.
How does it compare to Bootstrap?
Bootstrap is a component-based framework with JavaScript dependencies, while The New CSS is a utility-first CSS-only library. The New CSS is significantly smaller (under 5KB vs 20KB+), uses modern CSS features, and has no JavaScript dependency.
Why is it so small?
The New CSS stays under 5KB gzipped by focusing on the most commonly used utilities and leveraging modern CSS features like custom properties and @layer. There is no JavaScript, no redundant prefixes, and no legacy browser fallbacks.

Troubleshooting

My styles aren't applying. What should I check?
First, verify the stylesheet is loaded correctly in your browser DevTools Network tab. Check that class names match exactly (they are case-sensitive). If you are using @layer in your own CSS, ensure your layer order does not conflict with The New CSS layers.
Does it work in older browsers?
The New CSS requires modern evergreen browsers: Chrome/Edge 111+, Firefox 113+, and Safari 16.4+. It does not support Internet Explorer or older browser versions, as it relies on modern features like oklch() and @layer.
Where can I report bugs or request features?
You can report bugs and request features on the GitHub Issues page. Contributions via pull requests are also welcome. Please check existing issues before creating a new one.