Pick Bootstrap if
You want prebuilt components with a decade of battle-testing, and you don't mind the weight.
honest comparison
css-is-awesome vs Tailwind vs Bootstrap
Three good tools. Different jobs. Here is where each one actually wins — and where cia is the only one that does the thing.
Compared against Tailwind CSS 4.3 and Bootstrap 5.3. cia sizes are measured from dist/; star counts and project ages come from GitHub. Figures verified 2026-08-17.
| Feature | css-is-awesome | Tailwind | Bootstrap |
|---|---|---|---|
| Installation | 1 <link> tag | Build step required | 1 <link> tag |
| JavaScript shipped in packagecia npm package contains zero .js/.mjs files. JS-driven features ship as separate add-on packages. | 0 KB | 0 KB (CSS-only) | ~25 KB (modals, dropdowns, tabs) |
| Gzipped core (tokens + resets) | 2.4 KB | ~10 KB (utilities JIT) | ~25 KB |
| Tokens-only bundlescss/tokens.scss compiles to a 2.2 KB :root-vars-only file. Useful for consumers who want cia tokens with their own opinions about everything else. | 2.2 KB | n/a | n/a |
| Full bundle gzipped | 7.3 KB | varies (JIT) | ~29 KB CSS + 25 KB JS |
| Mixin APIcia is mixin-first; classes are an opt-in convenience layer. Tailwind rejects mixins on philosophy. | primary API | No | available |
| Utility classescia utilities default to off — Sass consumers add `@use ... with ($utilities: true)` to opt in. Pre-built dist file still ships every utility for CDN consumers. | opt-in | Yes | Yes |
| Zero-JS interactive componentscia ships native-primitive components — <details name>, <dialog>, [popover], radio+:has(). Browser handles state, no JS. | 6 (Accordion · Modal · Tooltip · Dropdown · Tabs · CopyButton) | 0 (need Headless UI) | No |
| Runtime theming (swap one file)Only cia lets you swap the entire visual identity by replacing one CSS file at runtime | Yes | No | No |
| Pair two brands by mode (light=A, dark=B)Native <link media> trick. No mainstream design system has this. See /docs/themes/pairing. | 2 <link> tags | No | No |
| Theme files shippedEach family ships three files: the base name auto-switches both modes via light-dark(), plus pinned -light and -dark variants. Terminal is the exception — terminal is dark-only by design and terminal-light is a separate daylight identity. 24 SCSS sources, 24 built files, all regenerated by npm run build:css:themes. | 24 files across 8 families | 0 (config only) | 2 (light / dark) |
| Drop a theme file in with no markup changeEvery theme emits `:root, :root[data-theme="name"]`, so swapping the file reskins the page on its own — data-theme is optional. It is required only for the 24-theme bundle, where the attribute is the only thing distinguishing themes. | Yes | No | No |
| In-browser theme editorEdit any of the 127 required tokens with color pickers / sliders / inputs, see every component reskin live, download a contract-conformant theme.css. Visit /themes. | live preview + downloadable theme.css | No | No |
| Typed theme contract + validatorscripts/theme-validator.js fails the build if any theme misses a contract token or a contrast pair. check:theme-drift separately proves the committed CSS still matches its SCSS source. No equivalent in Tailwind or Bootstrap. | 127 required + 36 optional · CI gate | untyped config | No |
| Themeable spacing scaleA theme owns the numbered spacing scale, so swapping a theme re-proportions the page rather than only recolouring it. The t-shirt names (--space-md etc.) are optional aliases the library emits as var() references into the numbered scale. | --space-0…9, contract-required | config-time only (rebuild) | Sass variables (rebuild) |
| Theme-driven animationsSame keyframes feel snappy under Terminal, floaty under Glass — zero code change. See /docs/animation. | reads --duration-* / --ease per theme | fixed timing utilities | fixed timing utilities |
| Icon systemLucide-vendored core pack at public/icons/core/. Drop a new SVG in to add it; declare a CSS var to override per theme. | 49-glyph core + drop-in + per-theme override | No | separate Bootstrap Icons package |
| Requires a build step | No | Yes | No |
| JavaScript dependencyBootstrap's dropdowns, modals, tabs need bootstrap.js | No | No | Yes |
| Class namescia is mixin-first — pick your own selector, @include the mixin. Bootstrap bakes in BEM. Tailwind stacks utilities in markup. | you pick | compose utilities | BEM-style |
| Tree-shakeable | opt-in core/utils bundles | Yes | sort of |
| React components shipped (docs site) | 50 | 0 (utility-only) | ~30 |
| Years of battle-testingTailwind's first commit landed Oct 2017; Bootstrap's July 2011. cia is new — that is a real disadvantage, not a rounding error. | new | 8+ | 15+ |
| GitHub stars | handful | 97k+ | 174k+ |
Bundle tiers
Pick the smallest tier that covers your needs. Tier choice is a <link> URL change — no rebuild.
| Tier | Size | What you get |
|---|---|---|
core | 2.4 KB gzipped | Tokens (CSS custom properties) + resets. The minimum to use the system. |
utilities | 4.1 KB gzipped | All cia-* utility classes (spacing, typography, layout, color, etc.). |
full | 7.3 KB gzipped | Core + utilities + every component recipe in one file. |
Where each one wins
Pick Tailwind if
You want maximum control via utility classes, you're fine with a build step, and a huge ecosystem matters.
Pick css-is-awesome if
You want a tiny, honest SCSS system with a mixin API, and you want to reskin your site by swapping one CSS file.
The differentiator