CSS

Style your application using Nord Design Tokens through CSS utility classes.

We provide two approaches to styling your application with Nord Design Tokens. Choose the one that best fits your project:

Tailwind CSS Recommended

For new projects, we recommend using our Tailwind CSS integration. It provides:

Modern utility-first approach with Tailwind CSS v4
Smaller bundle sizes through automatic purging
Excellent developer experience and IDE support
Wide industry adoption and community support
Full access to Nord Design Tokens as Tailwind theme variables
ESLint plugin for enforcing best practices and migration assistance

Get started with Tailwind

Legacy CSS Framework

Our original CSS framework provides a standalone set of utility classes prefixed with .n-. Use this if:

You're maintaining an existing project using the legacy framework
You need a standalone solution without Tailwind
You prefer our custom utility class naming conventions

View Legacy CSS Framework

ESLint Plugin

We provide an ESLint plugin that works with both Tailwind and Legacy CSS:

Enforce logical CSS properties for better RTL/LTR support
Catch typos and invalid classes in legacy n-* class names
Migrate from legacy to Tailwind with auto-fixable rules
Tailwind best practices with integrated better-tailwindcss rules

View ESLint Plugin

Getting support

Need help choosing or using our CSS solutions? Please head over to the Support page for more information and ways to contact us.