The New CSS vs Tailwind CSS vs Bootstrap

Choosing a CSS framework is one of the first decisions in any web project. This page offers a factual, side-by-side comparison of three popular approaches: The New CSS, Tailwind CSS, and Bootstrap. Each framework has genuine strengths, and the best choice depends on your project requirements, team experience, and performance goals.

Overview

The New CSS is a utility-first CSS library that ships as plain CSS with no build step required. It is built entirely on modern CSS features including oklch() colors, @layer ordering, container queries, and CSS custom properties. The full bundle stays under 5KB gzipped.

Tailwind CSS is the most widely adopted utility-first framework. It uses a build step with PostCSS or a CLI to scan your templates and generate only the CSS classes you actually use. Tailwind offers an extensive utility API, strong IDE tooling, and a large ecosystem of plugins and component libraries.

Bootstrap is a component-oriented framework that has been a staple of web development since 2011. It provides pre-built components like navbars, modals, and carousels alongside a growing set of utility classes. Bootstrap can be used without a build step by including the compiled CSS, or customized via Sass.

Bundle Size Comparison

Bundle size directly affects page load performance, especially on mobile networks and lower-powered devices. Every additional kilobyte of CSS must be downloaded, parsed, and applied before the browser can render the page. A smaller CSS bundle means faster First Contentful Paint and better Core Web Vitals scores.

Tailwind mitigates its larger default size through tree-shaking: the build step removes unused classes so production bundles typically range from 10KB to 30KB depending on how many utilities your project uses. Bootstrap does not tree-shake CSS by default, though tools like PurgeCSS can be added separately. The New CSS ships the entire library at under 5KB, so no purging or tree-shaking is necessary.

Build Process

The New CSS requires zero tooling. Drop a single <link> tag into your HTML and start using utility classes immediately. This makes it ideal for prototyping, static sites, and environments where build tooling is unavailable or undesirable.

Tailwind requires a build pipeline. You need PostCSS (or the Tailwind CLI), a configuration file, and content paths defined so unused classes can be purged. This adds complexity but also enables powerful features like custom utilities, plugins, and JIT compilation.

Bootstrap can be used without a build step by including the pre-compiled CSS from a CDN. For deeper customization, you need a Sass compiler to override variables and include only the modules you need. This gives Bootstrap a low barrier to entry with an optional path to advanced configuration.

Modern CSS Features

The New CSS is built from the ground up on modern CSS specifications. oklch() provides perceptually uniform color palettes, meaning equal steps in lightness look equal to the human eye across all hues. @layer eliminates specificity conflicts by letting the browser resolve cascade order declaratively. Container queries enable component-level responsive design without relying on viewport breakpoints.

Tailwind has adopted @layer internally and exposes some modern features through plugins, but its generated output is designed for broad compatibility. Bootstrap introduced CSS custom properties in version 5, though its color system still relies on Sass and hex/rgb values. Both frameworks are gradually modernizing, but The New CSS treats modern CSS as a baseline rather than a progressive enhancement.

Customization

The New CSS exposes all design tokens as CSS custom properties on :root. To change the primary blue, spacing scale, or font stack, override the relevant variable in your own stylesheet. Changes take effect immediately with no rebuild, and they cascade into every utility that references that token.

Tailwind offers deep customization through its configuration file. You can extend or override the entire theme, add custom utilities, and create plugins. This is extremely powerful for large design systems, but changes require re-running the build step.

Bootstrap supports customization through Sass variables (which require a Sass compiler) and, since version 5, through CSS custom properties for runtime adjustments like color changes. The Sass path offers the most control, while the CSS custom properties path is more convenient for simpler tweaks.

Dark Mode

The New CSS takes a unique approach to dark mode by inverting the gray color scale. When dark mode is active, bg-gray-50 becomes dark and bg-gray-900 becomes light. This means your existing gray utilities adapt automatically without adding any dark-prefixed classes. Both automatic OS detection and a manual data-theme toggle are supported simultaneously.

Tailwind requires you to explicitly add dark: variants to every element that should change in dark mode. This gives you fine-grained control over every color in both modes but increases the number of classes in your markup. Tailwind supports both media-query-based and class-based dark mode strategies.

Bootstrap 5.3 introduced a color mode system using the data-bs-theme attribute. It does not automatically detect OS preference out of the box -- you need to add JavaScript to read prefers-color-scheme and set the attribute. However, Bootstrap provides comprehensive color mode support across all of its components once the attribute is set.

When to Choose Each

Choose The New CSS when you need:

• Rapid prototyping and MVPs with zero configuration
• Small to medium sites where every kilobyte counts
• Performance-critical projects targeting top Core Web Vitals scores
• Environments without build tooling (plain HTML, CMS templates, email)
• A learning resource for modern CSS features like oklch(), @layer, and container queries
• Server-rendered apps where you want pure CSS with no JavaScript dependency

Choose Tailwind CSS when you need:

• The largest utility API with support for arbitrary values and complex variants
• Excellent IDE tooling with autocomplete, linting, and class sorting
• A mature ecosystem of plugins, component libraries (Headless UI, daisyUI), and templates
• Large teams that benefit from a shared configuration file and design system enforcement
• Fine-grained control over every aspect of dark mode, responsive design, and state variants

Choose Bootstrap when you need:

• Pre-built, accessible components like modals, dropdowns, carousels, and navbars
• A familiar framework that most web developers already know
• Extensive documentation with examples for common UI patterns
• Projects where component consistency matters more than minimal bundle size
• Teams transitioning from older codebases that already use Bootstrap

These frameworks are not mutually exclusive. Some teams use The New CSS for lightweight pages alongside Tailwind for their main application. Others use Bootstrap components with custom utility classes layered on top. The right choice depends on your specific constraints around performance, team familiarity, tooling requirements, and project complexity.

Ready to try The New CSS? Get started in under a minute -- no install, no config, just a link tag.