Getting Started

Welcome to Quanta CSS

Quanta CSS is a utility-first framework built for speed, clarity, and dark mode by default. This guide helps you start from scratch.

Installation

Pick one of the following:

<!-- CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quanta-css@latest/dist/quanta.min.css" />

# NPM
npm install quanta-css

# Yarn
yarn add quanta-css

// main.js or entry point
import 'quanta-css/dist/quanta.css';

Vite Setup

Folder structure:

/my-quanta-app
├── index.html
├── src/
│   └── main.js
├── vite.config.js
├── package.json

Sample Vite config:

// vite.config.js
export default {
    root: './',
    server: {
        open: true,
    },
};

index.html:

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8" />
    <title>Quanta App</title>
</head>
<body>
    <h1 class="font-s-24 font-w-bold color-primary text-center">Hello Quanta</h1>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

Dark Mode

Set manually:

<html data-theme="dark">

Toggle via JS:

document.documentElement.setAttribute('data-theme', 'dark');

Customization

Override CSS tokens globally using :root:

:root {
    --quanta-primary: #7f5af0;
    --quanta-radius: 0.75rem;
    --quanta-font: 'Inter', sans-serif;
}

Optimization

Remove unused styles using PurgeCSS-compatible tools:

module.exports = {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
}