Nova uses Tailwind CSS as the foundation for layout and styling. Tailwind is a utility-first CSS framework that helps developers build interfaces directly in their markup using predefined utility classes. This page introduces how Tailwind is used in Nova and explains how you can start using it effectively.
Why Tailwind?
Tailwind allows you to apply styling using small, composable utility classes—such as p-4 for padding or text-center for text alignment. This makes your code more consistent, maintainable, and easier to reason about, especially when using Nova’s design tokens.
Nova is built around a design system and component library that encourages structured, scalable UI development. Tailwind fits naturally into this approach by making design decisions explicit and reusable.
Tailwind in Nova
Nova comes with a custom Tailwind configuration that reflects our design system’s values. This configuration includes:
-
Design tokens: All spacing, colors, typography, and other style values are defined using Nova’s tokens.
Refer to the Design Tokens article for full details. - Semantic naming: Colors and other tokens are named by intent (e.g., text-high) instead of raw values (e.g., text-blue-500). This improves readability and consistency.
- Framework alignment: Nova follows Tailwind’s naming conventions as closely as possible to reduce the learning curve.
We do not redefine Tailwind with custom utilities. Instead, we extend its values to match Nova’s design system.
Two Ways to Use Tailwind
You can use Tailwind in Nova projects in one of two ways (both can be found in the Get Started section).
1. Precompiled CSS
Nova provides a precompiled CSS file that includes all utility classes. This is the fastest way to get started.
- ✅ Simple to integrate
- ❌ Larger file size
- ❌ No auto-completion or purge features
Use this option if you want a minimal setup and are not customizing much.
2. Tailwind Plugin (Recommended)
Nova offers a plugin to extend your own Tailwind configuration with Nova’s tokens and settings.
- ✅ Full Tailwind support (auto-complete, purge, etc.)
- ✅ Best for performance and development experience