Tailwind CSSRecommended

Integrate Nord Design Tokens with Tailwind CSS v4 for a modern, utility-first approach to styling your application.

We provide a Tailwind CSS entry point that maps all Nord Design Tokens to Tailwind theme variables. This allows you to use familiar Tailwind syntax while maintaining design consistency with Nord. All utilities use the n: prefix (variant syntax) to prevent collisions.

Learning Tailwind CSS For comprehensive documentation on all available utility classes, visit the official Tailwind CSS documentation. This page covers Nord-specific configuration and components—use tailwindcss.com as your reference for standard utilities like flexbox, grid, spacing, and more.

Migrating from Legacy CSS? See our Tailwind CSS Migration Guide for a complete mapping of legacy classes to Tailwind equivalents.

Installation #

First, ensure you have Tailwind CSS v4 installed in your project.

Then install the CSS package:

npm install @nordhealth/css

Usage #

Import the Tailwind entry in your main CSS file:

@import "@nordhealth/css/tailwind";

All Tailwind utilities are prefixed with n: to prevent collisions with other frameworks:

<div class="n:flex n:gap-m n:p-l n:bg-surface n:rounded">
  <span class="n:text-default n:font-sans">Hello World</span>
</div>

Prefix syntax
Tailwind v4 uses variant-style prefixes. Write n:flex not n-flex. The colon is required.

Peer Dependencies #

The Tailwind entry requires tailwindcss ^4.0.0 as a peer dependency.

Theme Variables #

The Tailwind entry maps all Nord Design Tokens to Tailwind theme variables. For the full list of available utilities, see the Tailwind CSS documentation.

This covers also all hover, focus, breakpoints and other states, see hover, focus and other states and responsive design for more information.

Logical Properties #

Flow-relative utilities for RTL/internationalization support:

Typography Examples #

Use Tailwind's typography utilities with Nord font sizes and weights.

<!-- Font sizes -->
<p class="n:text-xxxl">.n:text-xxxl - The quick brown fox</p>
<p class="n:text-xxl">.n:text-xxl - The quick brown fox</p>
<p class="n:text-xl">.n:text-xl - The quick brown fox</p>
<p class="n:text-l">.n:text-l - The quick brown fox</p>
<p class="n:text-m">.n:text-m - The quick brown fox</p>
<p class="n:text-s">.n:text-s - The quick brown fox</p>
<p class="n:text-xs">.n:text-xs - The quick brown fox</p>

<hr />

<!-- Font weights -->
<p class="n:font-normal">.n:font-normal - The quick brown fox</p>
<p class="n:font-active">.n:font-active - The quick brown fox</p>
<p class="n:font-heading">.n:font-heading - The quick brown fox</p>
<p class="n:font-strong">.n:font-strong - The quick brown fox</p>

<hr />

<!-- Font families -->
<p class="n:font-sans">.n:font-sans - The quick brown fox jumps over the lazy dog</p>
<p class="n:font-mono">.n:font-mono - The quick brown fox jumps over the lazy dog</p>

<hr />

<!-- Line heights -->
<p class="n:leading-tight n:text-l">
  .n:leading-tight - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi
  voluptatibus.
</p>
<p class="n:leading-heading n:text-l">
  .n:leading-heading - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi
  voluptatibus.
</p>
<p class="n:leading-default n:text-l">
  .n:leading-default - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi
  voluptatibus.
</p>
<p class="n:leading-caption n:text-l">
  .n:leading-caption - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi
  voluptatibus.
</p>

<hr />

<!-- Text alignment -->
<p class="n:text-left">.n:text-left - Aligned to the left</p>
<p class="n:text-center">.n:text-center - Centered text</p>
<p class="n:text-right">.n:text-right - Aligned to the right</p>

<hr />

<!-- Text transform -->
<p class="n:uppercase">.n:uppercase - the quick brown fox</p>
<p class="n:lowercase">.n:lowercase - THE QUICK BROWN FOX</p>
<p class="n:capitalize">.n:capitalize - the quick brown fox</p>

<hr />

<!-- Text wrapping and overflow -->
<div class="n:truncate n:max-w-xs">.n:truncate - This text will be truncated with an ellipsis when it overflows</div>
<div class="n:break-words n:max-w-xs">.n:break-words - Thisisaverylongwordthatwillbreakwhenneeded</div>

View typography examples

Color Examples #

Use Tailwind's color utilities with Nord semantic colors.

<!-- Text colors -->
<p class="n:text-default">.n:text-default - Default text color</p>
<p class="n:text-weak">.n:text-weak - Weak text color</p>
<p class="n:text-weaker">.n:text-weaker - Weaker text color</p>
<p class="n:text-weakest">.n:text-weakest - Weakest text color</p>
<p class="n:text-link">.n:text-link - Link text color</p>
<p class="n:text-error">.n:text-error - Error text color</p>
<p class="n:text-danger">.n:text-danger - Danger text color</p>
<p class="n:text-success">.n:text-success - Success text color</p>
<p class="n:text-warning">.n:text-warning - Warning text color</p>
<p class="n:text-info">.n:text-info - Info text color</p>
<p class="n:text-highlight">.n:text-highlight - Highlight text color</p>
<p class="n:text-progress">.n:text-progress - Progress text color</p>

<hr />

<!-- Background colors - surfaces -->
<div class="n:bg-surface n:p-m">.n:bg-surface</div>
<div class="n:bg-default n:p-m">.n:bg-default</div>
<div class="n:bg-surface-raised n:p-m">.n:bg-surface-raised</div>
<div class="n:bg-surface-lowered n:p-m">.n:bg-surface-lowered</div>

<hr />

<!-- Background colors - status -->
<div class="n:bg-status-neutral n:text-on-accent n:p-m">.n:bg-status-neutral</div>
<div class="n:bg-status-warning n:p-m">.n:bg-status-warning</div>
<div class="n:bg-status-highlight n:text-on-accent n:p-m">.n:bg-status-highlight</div>
<div class="n:bg-status-danger n:text-on-accent n:p-m">.n:bg-status-danger</div>
<div class="n:bg-status-success n:text-on-accent n:p-m">.n:bg-status-success</div>
<div class="n:bg-status-info n:text-on-accent n:p-m">.n:bg-status-info</div>
<div class="n:bg-status-progress n:text-on-accent n:p-m">.n:bg-status-progress</div>

<hr />

<!-- Background colors - status weak -->
<div class="n:bg-status-neutral-weak n:p-m">.n:bg-status-neutral-weak</div>
<div class="n:bg-status-warning-weak n:p-m">.n:bg-status-warning-weak</div>
<div class="n:bg-status-highlight-weak n:p-m">.n:bg-status-highlight-weak</div>
<div class="n:bg-status-danger-weak n:p-m">.n:bg-status-danger-weak</div>
<div class="n:bg-status-success-weak n:p-m">.n:bg-status-success-weak</div>
<div class="n:bg-status-info-weak n:p-m">.n:bg-status-info-weak</div>
<div class="n:bg-status-progress-weak n:p-m">.n:bg-status-progress-weak</div>

<hr />

<!-- Border colors -->
<div class="n:border n:border-default n:p-m">.n:border-default</div>
<div class="n:border n:border-strong n:p-m">.n:border-strong</div>
<div class="n:border n:border-danger n:p-m">.n:border-danger</div>
<div class="n:border n:border-success n:p-m">.n:border-success</div>
<div class="n:border n:border-warning n:p-m">.n:border-warning</div>
<div class="n:border n:border-info n:p-m">.n:border-info</div>

<hr />

<!-- Accent colors -->
<div class="n:bg-accent n:text-on-accent n:p-m">.n:bg-accent</div>
<div class="n:text-accent">.n:text-accent - Accent text color</div>

View color examples

Border Examples #

Use Tailwind's border utilities with Nord border radius and colors.

<!-- Border radius -->
<div class="n:rounded-sharp n:border n:border-default n:p-m">.n:rounded-sharp</div>
<div class="n:rounded-s n:border n:border-default n:p-m">.n:rounded-s</div>
<div class="n:rounded n:border n:border-default n:p-m">.n:rounded</div>
<div class="n:rounded-pill n:border n:border-default n:p-m">.n:rounded-pill</div>
<div
  class="n:rounded-circle n:border n:border-default n:p-m n:w-icon-xxl n:h-icon-xxl n:flex n:items-center n:justify-center"
>
  .n:rounded-circle
</div>

<hr />

<!-- Border widths -->
<div class="n:border n:border-default n:p-m">.n:border (1px)</div>
<div class="n:border-2 n:border-default n:p-m">.n:border-2 (2px)</div>
<div class="n:border-4 n:border-default n:p-m">.n:border-4 (4px)</div>

<hr />

<!-- Border sides -->
<div class="n:border-t n:border-default n:p-m">.n:border-t (top only)</div>
<div class="n:border-r n:border-default n:p-m">.n:border-r (right only)</div>
<div class="n:border-b n:border-default n:p-m">.n:border-b (bottom only)</div>
<div class="n:border-l n:border-default n:p-m">.n:border-l (left only)</div>

<hr />

<!-- Border with colors -->
<div class="n:border n:border-danger n:p-m">.n:border-danger</div>
<div class="n:border n:border-success n:p-m">.n:border-success</div>
<div class="n:border n:border-warning n:p-m">.n:border-warning</div>
<div class="n:border n:border-info n:p-m">.n:border-info</div>
<div class="n:border n:border-highlight n:p-m">.n:border-highlight</div>

View border examples

Shadow Examples #

Use Tailwind's shadow utilities with Nord shadow values.

<!-- Box shadows -->
<div class="n:shadow n:bg-surface n:p-l n:rounded">.n:shadow</div>

<hr />

<div class="n:shadow-card n:bg-surface n:p-l n:rounded">.n:shadow-card</div>

<hr />

<div class="n:shadow-header n:bg-surface n:p-l n:rounded">.n:shadow-header</div>

<hr />

<div class="n:shadow-nav n:bg-surface n:p-l n:rounded">.n:shadow-nav</div>

<hr />

<div class="n:shadow-popout n:bg-surface n:p-l n:rounded">.n:shadow-popout</div>

<hr />

<div class="n:shadow-modal n:bg-surface n:p-l n:rounded">.n:shadow-modal</div>

View shadow examples

Miscellaneous Utilities #

Additional Nord-specific utilities:

• n:divider - Horizontal divider line
• n:caption - Secondary text styling for captions

<!-- Divider -->
<p>Content above divider</p>
<hr class="n:divider" />
<p>Content below divider</p>

<hr />

<!-- Caption -->
<p class="n:caption">.n:caption - Secondary text for captions and metadata</p>
<p>Regular paragraph text for comparison</p>

View misc examples

Nord Components #

These components are unique to Nord and style their children automatically.

Reset #

The n:reset class normalizes child elements to a sensible default, applying Nord's typography settings and resetting margins, padding, and borders.

<div class="n:reset">
  <h1>The quick brown fox jumps over the lazy dog</h1>
  <h2>The quick brown fox jumps over the lazy dog</h2>
  <h3>The quick brown fox jumps over the lazy dog</h3>
  <h4>The quick brown fox jumps over the lazy dog</h4>
  <h5>The quick brown fox jumps over the lazy dog</h5>
  <h6>The quick brown fox jumps over the lazy dog</h6>
  <p>
    Lorem ipsum dolor sit amet <a href="#">consectetur adipisicing</a> elit. Deserunt amet ipsam enim sed sequi
    voluptatibus, culpa explicabo voluptate maxime a, cumque ea reprehenderit ad <code>consequuntur veniam</code>? Fuga
    impedit iste tenetur.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Architecto quasi</a>, incidunt eum ad, rerum
    dolorum sequi numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam
    totam.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <h2>The quick brown fox <a href="#">jumps over the</a> lazy dog</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <pre><code>&lt;link rel="stylesheet" href="https://nordcdn.net/ds/tokens/2.0.4/tokens.custom-properties.css" integrity="sha384-XtHi70a2WlH468I3Z4gPGu2ihcHfE7IzpM+bF0cn9nEXAG67YmXsSpBSEYULYC7E" crossorigin="anonymous" /&gt;</code></pre>
  <h3>The quick brown fox jumps over the lazy dog</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
  </p>
  <h4>The quick brown fox jumps over the lazy dog</h4>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <h5>The quick brown fox jumps over the lazy dog</h5>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <h6>The quick brown fox jumps over the lazy dog</h6>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <h3>The quick brown fox jumps over the lazy dog</h3>
  <ul>
    <li>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, aperiam doloribus. Dolore, eaque. Distinctio
      consequatur alias quae commodi praesentium recusandae libero, voluptate veniam. Commodi, velit ad ex sequi ut
      fugit?
    </li>
    <li>
      Molestias autem suscipit quos debitis. Fugiat asperiores vero unde quo, assumenda culpa iusto aspernatur fuga
      deleniti enim inventore! Ipsam, est. Impedit, illum! Animi eveniet perspiciatis nobis quia autem nam veniam.
    </li>
    <li>
      Aperiam corporis, aspernatur commodi a, quod illo suscipit voluptas similique, possimus odit error natus ex!
      Consequatur perferendis et similique, quo labore delectus autem minus enim aspernatur nesciunt saepe, nihil
      laboriosam.
    </li>
    <li>
      Sed, sunt. Ut, nihil? Odio quidem suscipit harum ea. Pariatur alias error incidunt provident tenetur neque
      accusantium quis, explicabo et quisquam, dignissimos soluta, consectetur sapiente recusandae cum expedita maiores
      deserunt.
    </li>
    <li>
      Soluta mollitia neque nemo libero ut totam minus enim maxime qui inventore et veniam, alias minima officia
      pariatur magni ipsa deserunt architecto asperiores ex dignissimos, culpa unde. Sint, cupiditate dolor?
    </li>
  </ul>
  <ol>
    <li>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et alias adipisci ut, ipsum quis quisquam deleniti quia,
      laudantium commodi placeat nostrum voluptatibus. Iusto labore voluptatibus dignissimos, sed eum maiores quaerat.
    </li>
    <li>
      Cum quasi temporibus distinctio maiores, dignissimos ullam quisquam? Dolorem similique consequatur laudantium rem
      perferendis. In sed ipsam nobis earum temporibus, veritatis totam libero atque sint quam, quo quisquam laborum
      est?
    </li>
    <li>
      Consequatur nemo dolorem nobis praesentium. Nisi laudantium pariatur sunt. Quo vitae quis fugit repellendus! Sunt
      ratione velit laborum natus libero. Incidunt dolor suscipit debitis commodi possimus. Soluta repellat unde nihil!
    </li>
    <li>
      Dolore labore, consectetur eaque suscipit molestiae incidunt quos dolorum? Aspernatur odio laudantium temporibus
      at, dolore illum cum ullam animi in distinctio sint maxime libero itaque, consequuntur eveniet. Doloremque, ipsum
      nesciunt?
    </li>
    <li>
      Tenetur ratione dolores accusamus illum totam, quidem sequi odit pariatur quae id numquam assumenda rem. Odit,
      numquam distinctio, eaque nihil adipisci aliquam similique, facilis mollitia saepe laudantium ea. Harum,
      temporibus.
    </li>
  </ol>
  <dl>
    <dt>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dt>
    <dd>
      Debitis quos exercitationem dolorem vitae doloremque delectus tempore tenetur quaerat maxime totam nihil
      praesentium, quae saepe fuga hic, aliquid, optio repellendus reprehenderit.
    </dd>
    <dt>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dt>
    <dd>
      Pariatur adipisci quas ducimus unde optio incidunt, dolor dolorum ex! Quos at error dolor veniam facere eaque
      possimus ullam perferendis, neque velit?
    </dd>
    <dt>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</dt>
    <dd>
      Velit aspernatur culpa dolore non. Enim cupiditate nihil dignissimos deserunt itaque a quis quibusdam, similique
      sequi voluptatibus, inventore optio asperiores voluptatem sed?
    </dd>
  </dl>
  <h3>The quick brown fox jumps over the lazy dog</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eveniet hic
    <em>officiis natus itaque dicta praesentium laborum</em>, optio <b>reprehenderit quas est nihil</b>, pariatur, porro
    nostrum facere ea molestias debitis quia!
  </p>
  <blockquote>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et illum provident nesciunt a illo sit, dicta labore
      aspernatur neque quibusdam ducimus in earum fugiat corporis doloribus magni praesentium cumque?
    </p>
    <cite>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus natus tenetur quidem ab libero accusantium
      dolore veniam eveniet recusandae voluptate est fugiat, ex explicabo possimus tempore eos praesentium quaerat quod?
    </cite>
  </blockquote>
  <small>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quis debitis dolor quasi, explicabo fuga alias illum
    provident a architecto itaque, dicta nulla ratione, veniam quidem culpa at consequuntur commodi.
  </small>
</div>

View reset example

Typeset #

The n:typeset class styles all child text elements for rich content areas like articles or documentation.

<div class="n:typeset">
  <h1>The quick brown fox jumps over the lazy dog</h1>
  <h2>The quick brown fox jumps over the lazy dog</h2>
  <h3>The quick brown fox jumps over the lazy dog</h3>
  <h4>The quick brown fox jumps over the lazy dog</h4>
  <h5>The quick brown fox jumps over the lazy dog</h5>
  <h6>The quick brown fox jumps over the lazy dog</h6>
  <p>
    Lorem ipsum dolor sit amet <a href="#">consectetur adipisicing</a> elit. Deserunt amet ipsam enim sed sequi
    voluptatibus, culpa explicabo voluptate maxime a, cumque ea reprehenderit ad <code>consequuntur veniam</code>? Fuga
    impedit iste tenetur.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="#">Architecto quasi</a>, incidunt eum ad, rerum
    dolorum sequi numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam
    totam.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <h2>The quick brown fox <a href="#">jumps over the</a> lazy dog</h2>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <pre><code>&lt;link rel="stylesheet" href="https://nordcdn.net/ds/tokens/2.0.4/tokens.custom-properties.css" integrity="sha384-XtHi70a2WlH468I3Z4gPGu2ihcHfE7IzpM+bF0cn9nEXAG67YmXsSpBSEYULYC7E" crossorigin="anonymous" /&gt;</code></pre>
  <h3>The quick brown fox jumps over the lazy dog</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
  </p>
  <h4>The quick brown fox jumps over the lazy dog</h4>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <h5>The quick brown fox jumps over the lazy dog</h5>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus, culpa
    explicabo voluptate maxime a, cumque ea reprehenderit ad consequuntur veniam? Fuga impedit iste tenetur.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <h6>The quick brown fox jumps over the lazy dog</h6>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quasi, incidunt eum ad, rerum dolorum sequi
    numquam illum deleniti nobis doloremque asperiores natus perferendis, recusandae at dolorem et aperiam totam.
  </p>
  <h3>The quick brown fox jumps over the lazy dog</h3>
  <ul>
    <li>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, aperiam doloribus. Dolore, eaque. Distinctio
      consequatur alias quae commodi praesentium recusandae libero, voluptate veniam. Commodi, velit ad ex sequi ut
      fugit?
    </li>
    <li>
      Molestias autem suscipit quos debitis. Fugiat asperiores vero unde quo, assumenda culpa iusto aspernatur fuga
      deleniti enim inventore! Ipsam, est. Impedit, illum! Animi eveniet perspiciatis nobis quia autem nam veniam.
    </li>
    <li>
      Aperiam corporis, aspernatur commodi a, quod illo suscipit voluptas similique, possimus odit error natus ex!
      Consequatur perferendis et similique, quo labore delectus autem minus enim aspernatur nesciunt saepe, nihil
      laboriosam.
    </li>
    <li>
      Sed, sunt. Ut, nihil? Odio quidem suscipit harum ea. Pariatur alias error incidunt provident tenetur neque
      accusantium quis, explicabo et quisquam, dignissimos soluta, consectetur sapiente recusandae cum expedita maiores
      deserunt.
    </li>
    <li>
      Soluta mollitia neque nemo libero ut totam minus enim maxime qui inventore et veniam, alias minima officia
      pariatur magni ipsa deserunt architecto asperiores ex dignissimos, culpa unde. Sint, cupiditate dolor?
    </li>
  </ul>
  <ol>
    <li>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et alias adipisci ut, ipsum quis quisquam deleniti quia,
      laudantium commodi placeat nostrum voluptatibus. Iusto labore voluptatibus dignissimos, sed eum maiores quaerat.
    </li>
    <li>
      Cum quasi temporibus distinctio maiores, dignissimos ullam quisquam? Dolorem similique consequatur laudantium rem
      perferendis. In sed ipsam nobis earum temporibus, veritatis totam libero atque sint quam, quo quisquam laborum
      est?
    </li>
    <li>
      Consequatur nemo dolorem nobis praesentium. Nisi laudantium pariatur sunt. Quo vitae quis fugit repellendus! Sunt
      ratione velit laborum natus libero. Incidunt dolor suscipit debitis commodi possimus. Soluta repellat unde nihil!
    </li>
    <li>
      Dolore labore, consectetur eaque suscipit molestiae incidunt quos dolorum? Aspernatur odio laudantium temporibus
      at, dolore illum cum ullam animi in distinctio sint maxime libero itaque, consequuntur eveniet. Doloremque, ipsum
      nesciunt?
    </li>
    <li>
      Tenetur ratione dolores accusamus illum totam, quidem sequi odit pariatur quae id numquam assumenda rem. Odit,
      numquam distinctio, eaque nihil adipisci aliquam similique, facilis mollitia saepe laudantium ea. Harum,
      temporibus.
    </li>
  </ol>
  <dl>
    <dt>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dt>
    <dd>
      Debitis quos exercitationem dolorem vitae doloremque delectus tempore tenetur quaerat maxime totam nihil
      praesentium, quae saepe fuga hic, aliquid, optio repellendus reprehenderit.
    </dd>
    <dt>Lorem ipsum dolor sit amet consectetur adipisicing elit.</dt>
    <dd>
      Pariatur adipisci quas ducimus unde optio incidunt, dolor dolorum ex! Quos at error dolor veniam facere eaque
      possimus ullam perferendis, neque velit?
    </dd>
    <dt>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</dt>
    <dd>
      Velit aspernatur culpa dolore non. Enim cupiditate nihil dignissimos deserunt itaque a quis quibusdam, similique
      sequi voluptatibus, inventore optio asperiores voluptatem sed?
    </dd>
  </dl>
  <h3>The quick brown fox jumps over the lazy dog</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eveniet hic
    <em>officiis natus itaque dicta praesentium laborum</em>, optio <b>reprehenderit quas est nihil</b>, pariatur, porro
    nostrum facere ea molestias debitis quia!
  </p>
  <blockquote>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex et illum provident nesciunt a illo sit, dicta labore
      aspernatur neque quibusdam ducimus in earum fugiat corporis doloribus magni praesentium cumque?
    </p>
    <cite>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus natus tenetur quidem ab libero accusantium
      dolore veniam eveniet recusandae voluptate est fugiat, ex explicabo possimus tempore eos praesentium quaerat quod?
    </cite>
  </blockquote>
  <small>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quis debitis dolor quasi, explicabo fuga alias illum
    provident a architecto itaque, dicta nulla ratione, veniam quidem culpa at consequuntur commodi.
  </small>
</div>

View typeset example

Description List #

The n:dl class styles description lists for presenting key/value data.

<!-- Description list component -->
<dl class="n:dl">
  <dt>Name</dt>
  <dd>John Smith</dd>
  <dt>Email</dt>
  <dd>john.smith@example.com</dd>
  <dt>Role</dt>
  <dd>Software Engineer</dd>
  <dt>Department</dt>
  <dd>Engineering</dd>
  <dt>Location</dt>
  <dd>Helsinki, Finland</dd>
</dl>

View description list example

Form Utilities #

Style form elements with these Nord-specific utilities:

• n:label - Form label styling
• n:hint - Form hint text
• n:error - Form error text
• n:input - Base input styling

<!-- Form label -->
<label class="n:label">Email address</label>

<hr class="n:divider" />

<!-- Form hint -->
<span class="n:hint">Enter your work email</span>

<hr class="n:divider" />

<!-- Form error -->
<span class="n:error">This field is required</span>

<hr class="n:divider" />

<!-- Form input -->
<input class="n:input" type="text" placeholder="Enter text..." />

<hr class="n:divider" />

<!-- Complete form field -->
<div class="n:flex n:flex-col n:gap-xs">
  <label class="n:label">Email address</label>
  <input class="n:input" type="email" placeholder="you@example.com" />
  <span class="n:hint">We'll never share your email</span>
</div>

<hr class="n:divider" />

<!-- Form field with error -->
<div class="n:flex n:flex-col n:gap-xs">
  <label class="n:label">Password</label>
  <input class="n:input" type="password" placeholder="Enter password" />
  <span class="n:error">Password must be at least 8 characters</span>
</div>

View form examples

Grid #

Use Tailwind's grid utilities for layout with Nord spacing values.

<!-- Default 12 column grid -->
<section class="n:grid n:grid-cols-12 n:gap-m">
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
  <div>.n:grid-cols-12</div>
</section>

<hr />

<!-- Grid with 8 columns -->
<section class="n:grid n:grid-cols-8 n:gap-m">
  <div>.n:grid-cols-8</div>
  <div>.n:grid-cols-8</div>
  <div>.n:grid-cols-8</div>
  <div>.n:grid-cols-8</div>
  <div>.n:grid-cols-8</div>
  <div>.n:grid-cols-8</div>
  <div>.n:grid-cols-8</div>
  <div>.n:grid-cols-8</div>
</section>

<hr />

<!-- Grid with 6 columns -->
<section class="n:grid n:grid-cols-6 n:gap-m">
  <div>.n:grid-cols-6</div>
  <div>.n:grid-cols-6</div>
  <div>.n:grid-cols-6</div>
  <div>.n:grid-cols-6</div>
  <div>.n:grid-cols-6</div>
  <div>.n:grid-cols-6</div>
</section>

<hr />

<!-- Grid with 4 columns -->
<section class="n:grid n:grid-cols-4 n:gap-m">
  <div>.n:grid-cols-4</div>
  <div>.n:grid-cols-4</div>
  <div>.n:grid-cols-4</div>
  <div>.n:grid-cols-4</div>
</section>

<hr />

<!-- Grid with 3 columns -->
<section class="n:grid n:grid-cols-3 n:gap-m">
  <div>.n:grid-cols-3</div>
  <div>.n:grid-cols-3</div>
  <div>.n:grid-cols-3</div>
</section>

<hr />

<!-- Grid with 2 columns -->
<section class="n:grid n:grid-cols-2 n:gap-m">
  <div>.n:grid-cols-2</div>
  <div>.n:grid-cols-2</div>
</section>

<hr />

<!-- Grid with XS gap -->
<section class="n:grid n:grid-cols-2 n:gap-xs">
  <div>.n:grid-cols-2 .n:gap-xs</div>
  <div>.n:grid-cols-2 .n:gap-xs</div>
</section>

<hr />

<!-- Grid with S gap -->
<section class="n:grid n:grid-cols-2 n:gap-s">
  <div>.n:grid-cols-2 .n:gap-s</div>
  <div>.n:grid-cols-2 .n:gap-s</div>
</section>

<hr />

<!-- Grid with L gap -->
<section class="n:grid n:grid-cols-2 n:gap-l">
  <div>.n:grid-cols-2 .n:gap-l</div>
  <div>.n:grid-cols-2 .n:gap-l</div>
</section>

<hr />

<!-- Grid with XL gap -->
<section class="n:grid n:grid-cols-2 n:gap-xl">
  <div>.n:grid-cols-2 .n:gap-xl</div>
  <div>.n:grid-cols-2 .n:gap-xl</div>
</section>

<hr />

<!-- Grid with XXL gap -->
<section class="n:grid n:grid-cols-2 n:gap-xxl">
  <div>.n:grid-cols-2 .n:gap-xxl</div>
  <div>.n:grid-cols-2 .n:gap-xxl</div>
</section>

<hr />

<!-- Grid with no gap (omit gap class) -->
<section class="n:grid n:grid-cols-2">
  <div>.n:grid-cols-2 (no gap)</div>
  <div>.n:grid-cols-2 (no gap)</div>
</section>

<hr />

<!-- Grid with auto-centering -->
<section class="n:grid n:grid-cols-3 n:gap-m n:mx-auto" style="max-width: 800px">
  <div>.n:mx-auto (centered)</div>
  <div>.n:mx-auto (centered)</div>
  <div>.n:mx-auto (centered)</div>
</section>

<hr />

<!-- Grid with column span -->
<section class="n:grid n:grid-cols-4 n:gap-m">
  <div class="n:col-span-2">.n:col-span-2</div>
  <div>.n:grid-cols-4</div>
  <div>.n:grid-cols-4</div>
</section>

<hr />

<!-- Grid with place-items-center -->
<section class="n:grid n:grid-cols-3 n:gap-m n:place-items-center" style="block-size: calc(var(--n-size-icon-xxl) * 3)">
  <div>.n:place-items-center</div>
  <div>.n:place-items-center</div>
  <div>.n:place-items-center</div>
</section>

View grid examples

Container Utilities #

Use n:container for a centered container with max-width 1200px, or add a size modifier (n:container-xl, n:container-l, n:container-m, n:container-s, n:container-xs, n:container-xxs) for different max-widths:

<!-- Container utilities -->
<div>
  <div class="n:container n:bg-surface-raised n:p-m n:rounded n:mb-m">
    <p>.n:container - max-width: 1200px (default)</p>
  </div>

  <div class="n:container-xl n:bg-surface-raised n:p-m n:rounded n:mb-m">
    <p>.n:container-xl - max-width: 2400px</p>
  </div>

  <div class="n:container-l n:bg-surface-raised n:p-m n:rounded n:mb-m">
    <p>.n:container-l - max-width: 1200px</p>
  </div>

  <div class="n:container-m n:bg-surface-raised n:p-m n:rounded n:mb-m">
    <p>.n:container-m - max-width: 1000px</p>
  </div>

  <div class="n:container-s n:bg-surface-raised n:p-m n:rounded n:mb-m">
    <p>.n:container-s - max-width: 800px</p>
  </div>

  <div class="n:container-xs n:bg-surface-raised n:p-m n:rounded n:mb-m">
    <p>.n:container-xs - max-width: 600px</p>
  </div>

  <div class="n:container-xxs n:bg-surface-raised n:p-m n:rounded">
    <p>.n:container-xxs - max-width: 400px</p>
  </div>
</div>

View container examples

Breakpoints #

Use breakpoint prefixes to apply styles at different screen sizes. Available breakpoints: xxs (400px), xs (500px), s (620px), m (840px), l (1000px), xl (2400px). See Customizing Breakpoints for how to override these values.

The n: prefix always comes first, followed by the breakpoint, then the utility:

<!-- Pattern: n:[breakpoint]:[utility] -->
<div class="n:hidden n:m:block">Hidden on mobile, visible on medium+</div>
<div class="n:text-s n:l:text-xl">Small text, large on l+ screens</div>

<!-- Breakpoint examples -->
<div class="n:flex n:flex-col n:gap-m">
  <div class="n:bg-surface-raised n:p-m n:rounded">
    <p class="n:font-heading n:mb-s">Responsive visibility</p>
    <div class="n:flex n:gap-s n:flex-wrap">
      <span class="n:hidden n:xs:inline n:bg-status-info n:text-on-accent n:px-s n:py-xs n:rounded-s">xs+</span>
      <span class="n:hidden n:s:inline n:bg-status-success n:text-on-accent n:px-s n:py-xs n:rounded-s">s+</span>
      <span class="n:hidden n:m:inline n:bg-status-warning n:text-on-accent n:px-s n:py-xs n:rounded-s">m+</span>
      <span class="n:hidden n:l:inline n:bg-status-highlight n:text-on-accent n:px-s n:py-xs n:rounded-s">l+</span>
      <span class="n:hidden n:xl:inline n:bg-status-danger n:text-on-accent n:px-s n:py-xs n:rounded-s">xl+</span>
    </div>
    <p class="n:text-s n:text-weaker n:mt-s">Resize to see badges appear at each breakpoint</p>
  </div>

  <div class="n:bg-surface-raised n:p-m n:rounded">
    <p class="n:font-heading n:mb-s">Responsive layout</p>
    <div class="n:flex n:flex-col n:s:flex-row n:gap-s">
      <div class="n:bg-surface n:p-s n:rounded-s n:flex-1">Item 1</div>
      <div class="n:bg-surface n:p-s n:rounded-s n:flex-1">Item 2</div>
      <div class="n:bg-surface n:p-s n:rounded-s n:flex-1">Item 3</div>
    </div>
    <p class="n:text-s n:text-weaker n:mt-s">Stacks vertically on mobile, horizontal on s+ screens</p>
  </div>

  <div class="n:bg-surface-raised n:p-m n:rounded">
    <p class="n:font-heading n:mb-s">Responsive spacing</p>
    <div class="n:flex n:gap-xs n:s:gap-s n:m:gap-m n:l:gap-l">
      <div class="n:bg-surface n:p-s n:rounded-s">A</div>
      <div class="n:bg-surface n:p-s n:rounded-s">B</div>
      <div class="n:bg-surface n:p-s n:rounded-s">C</div>
    </div>
    <p class="n:text-s n:text-weaker n:mt-s">Gap increases at each breakpoint</p>
  </div>

  <div class="n:bg-surface-raised n:p-m n:rounded">
    <p class="n:font-heading n:mb-s">Responsive text</p>
    <p class="n:text-s n:s:text-m n:m:text-l n:l:text-xl">This text grows with screen size</p>
  </div>
</div>

View breakpoint examples

States (Hover, Focus, etc.) #

Apply styles on hover, focus, and other interactive states. The n: prefix comes first, followed by the state:

<!-- Pattern: n:[state]:[utility] -->
<button class="n:bg-surface n:hover:bg-accent">Hover me</button>
<input class="n:border-default n:focus:border-accent" />

You can combine states with breakpoints:

<!-- Pattern: n:[state]:[breakpoint]:[utility] or n:[breakpoint]:[state]:[utility] -->
<button class="n:hover:m:bg-accent">Hover effect only on medium+ screens</button>

<!-- Hover states -->
<div class="n:flex n:flex-col n:gap-m">
  <div class="n:bg-surface-raised n:p-m n:rounded">
    <p class="n:font-heading n:mb-s">Hover states</p>
    <div class="n:flex n:gap-s n:flex-wrap">
      <button
        class="n:bg-surface n:hover:bg-accent n:hover:text-on-accent n:px-m n:py-s n:rounded n:border n:border-default n:cursor-pointer"
      >
        n:hover:bg-accent
      </button>
      <button
        class="n:text-default n:hover:text-accent n:px-m n:py-s n:rounded n:border n:border-default n:cursor-pointer"
      >
        n:hover:text-accent
      </button>
      <button class="n:border n:border-default n:hover:border-accent n:px-m n:py-s n:rounded n:cursor-pointer">
        n:hover:border-accent
      </button>
    </div>
  </div>

  <div class="n:bg-surface-raised n:p-m n:rounded">
    <p class="n:font-heading n:mb-s">Focus states</p>
    <div class="n:flex n:gap-s n:flex-wrap">
      <input class="n:input n:focus:border-accent" type="text" placeholder="n:focus:border-accent" />
      <input class="n:input n:focus:ring-2 n:focus:ring-accent" type="text" placeholder="n:focus:ring-accent" />
    </div>
  </div>

  <div class="n:bg-surface-raised n:p-m n:rounded">
    <p class="n:font-heading n:mb-s">Active states</p>
    <div class="n:flex n:gap-s n:flex-wrap">
      <button
        class="n:bg-accent n:text-on-accent n:active:bg-accent-secondary n:px-m n:py-s n:rounded n:cursor-pointer"
      >
        n:active:bg-accent-secondary
      </button>
    </div>
  </div>

  <div class="n:bg-surface-raised n:p-m n:rounded">
    <p class="n:font-heading n:mb-s">Disabled states</p>
    <div class="n:flex n:gap-s n:flex-wrap n:items-center">
      <nord-button class="n:disabled:opacity-50 n:disabled:cursor-not-allowed" disabled>
        n:disabled:opacity-50
      </nord-button>
      <nord-input
        class="n:disabled:opacity-50 n:disabled:cursor-not-allowed"
        type="text"
        placeholder="n:disabled:opacity-50"
        disabled
        hide-label
      />
    </div>
  </div>

  <div class="n:bg-surface-raised n:p-m n:rounded">
    <p class="n:font-heading n:mb-s">Group hover</p>
    <div class="n:group n:bg-surface n:hover:bg-accent n:p-m n:rounded n:border n:border-default n:cursor-pointer">
      <p class="n:text-default n:group-hover:text-on-accent">
        Hover the card to change this text color (n:group-hover:text-on-accent)
      </p>
    </div>
  </div>
</div>

View state examples

ESLint Plugin #

We provide an ESLint plugin to help enforce Nord CSS best practices and assist with migration from legacy classes.

View ESLint Plugin documentation

Extending the Theme #

You can extend the theme with your own customizations:

@import "@nordhealth/css/tailwind";

@theme {
  --color-custom: #123456;
  --spacing-custom: 100px;
}

Customizing Breakpoints #

Nord provides these default breakpoints:

To override a breakpoint or add new ones, define them in your own @theme block:

@import "@nordhealth/css/tailwind";

@theme {
  /* Override existing breakpoint */
  --breakpoint-m: 48rem; /* 768px */

  /* Add new breakpoints */
  --breakpoint-2xl: 96rem; /* 1536px */
  --breakpoint-3xl: 120rem; /* 1920px */
}

Use your custom breakpoints like any other:

<div class="n:hidden n:2xl:block">Only visible on 2xl screens</div>

Why rem? Breakpoints use rem units so they scale with the user's browser font size settings, improving accessibility.

Getting support #

Need help with Tailwind CSS integration? Please head over to the Support page for more information and ways to contact us.