Tailwind CSS Recommended

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:

Copy code

npm install @nordhealth/css

Usage

Import the Tailwind entry in your main CSS file:

Copy code

@import "@nordhealth/css/tailwind";

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

Copy code

<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.

Category	Nord Values	Example
Spacing	`xs`, `s`, `m`, `l`, `xl`, `xxl`	`n:p-m`, `n:px-l`, `n:py-s`, `n:m-xl`, `n:gap-m`
Text Colors	`default`, `link`, `weak`, `weaker`, `weakest`, `on-accent`, `error`, `danger`, `success`, `neutral`, `warning`, `highlight`, `info`, `nav-heading`	`n:text-default`, `n:text-weak`, `n:text-error`
Background Colors	`default`, `surface`, `surface-raised`, `surface-lowered`, `header`, `status-*`, `button`, `button-hover`, `overlay`, `nav-surface`, `nav-hover`	`n:bg-surface`, `n:bg-nav-surface`, `n:bg-status-success`
Border Colors	`default`, `strong`, `hover`, `neutral`, `warning`, `danger`, `success`, `info`	`n:border-default`, `n:border-hover`
General Colors	`accent`, `accent-secondary`, `active`, `icon`, `icon-hover`	`n:text-accent`, `n:bg-accent`
Font Sizes	`xs`, `s`, `m`, `l`, `xl`, `xxl`, `xxxl`	`n:text-m`, `n:text-xl`, `n:lg:text-xxxl`
Font Families	`sans`, `mono`	`n:font-sans`, `n:font-mono`
Font Weights	`default`, `active`, `heading`, `strong`	`n:font-default`, `n:font-heading`, `n:font-strong`
Line Heights	`tight`, `heading`, `default`, `caption`	`n:leading-tight`, `n:leading-heading`, `n:leading-default`, `n:leading-caption`
Border Radius	`sharp`, `s`, `default`, `pill`, `circle`	`n:rounded`, `n:rounded-s`, `n:rounded-pill`, `n:rounded-circle`
Shadows	`default`, `card`, `header`, `nav`, `popout`, `modal`	`n:shadow`, `n:shadow-card`, `n:shadow-popout`, `n:shadow-modal`
Z-Index	`deep`, `default`, `sticky`, `nav`, `overlay`, `popout`, `modal`	`n:z-deep`, `n:z-default`, `n:z-sticky`, `n:z-overlay`, `n:z-popout`, `n:z-modal`
Breakpoints	`xxs`, `xs`, `s`, `m`, `l`, `xl`	`n:xxs:flex`, `n:xs:grid`, `n:m:hidden`, `n:l:block`, `n:xl:flex`

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:

Category	Utilities	Example
Padding	`p-is-`, `p-ie-`, `p-bs-`, `p-be-`, `p-i-`, `p-b-`	`n:p-is-m` (start), `n:p-i-l` (inline)
Margin	`m-is-`, `m-ie-`, `m-bs-`, `m-be-`, `m-i-`, `m-b-`	`n:m-is-auto`, `n:m-b-m`
Sizing	`is-`, `bs-`, `min-is-`, `max-is-`, `min-bs-`, `max-bs-`	`n:is-full`, `n:max-is-xl`
Borders	`border-is`, `border-ie`, `border-bs`, `border-be`, `border-i`, `border-b`	`n:border-is`
Space Between	`space-i-`, `space-b-`	`n:space-i-m`
Insets	`inset-block-`, `inset-inline-`, `block-start-`, `block-end-`	`n:block-start-m`

Typography Examples

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

.n:text-xxxl - The quick brown fox

.n:text-xxl - The quick brown fox

.n:text-xl - The quick brown fox

.n:text-l - The quick brown fox

.n:text-m - The quick brown fox

.n:text-s - The quick brown fox

.n:text-xs - The quick brown fox

.n:font-normal - The quick brown fox

.n:font-active - The quick brown fox

.n:font-heading - The quick brown fox

.n:font-strong - The quick brown fox

.n:font-sans - The quick brown fox jumps over the lazy dog

.n:font-mono - The quick brown fox jumps over the lazy dog

.n:leading-tight - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus.

.n:leading-heading - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus.

.n:leading-default - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus.

.n:leading-caption - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt amet ipsam enim sed sequi voluptatibus.

.n:text-left - Aligned to the left

.n:text-center - Centered text

.n:text-right - Aligned to the right

.n:uppercase - the quick brown fox

.n:lowercase - THE QUICK BROWN FOX

.n:capitalize - the quick brown fox

.n:truncate - This text will be truncated with an ellipsis when it overflows

.n:break-words - Thisisaverylongwordthatwillbreakwhenneeded

View typography examples

Color Examples

Use Tailwind's color utilities with Nord semantic colors.

.n:text-default - Default text color

.n:text-weak - Weak text color

.n:text-weaker - Weaker text color

.n:text-weakest - Weakest text color

.n:text-link - Link text color

.n:text-error - Error text color

.n:text-danger - Danger text color

.n:text-success - Success text color

.n:text-warning - Warning text color

.n:text-info - Info text color

.n:text-highlight - Highlight text color

.n:text-progress - Progress text color

.n:bg-surface

.n:bg-default

.n:bg-surface-raised

.n:bg-surface-lowered

.n:bg-status-neutral

.n:bg-status-warning

.n:bg-status-highlight

.n:bg-status-danger

.n:bg-status-success

.n:bg-status-info

.n:bg-status-progress

.n:bg-status-neutral-weak

.n:bg-status-warning-weak

.n:bg-status-highlight-weak

.n:bg-status-danger-weak

.n:bg-status-success-weak

.n:bg-status-info-weak

.n:bg-status-progress-weak

.n:border-default

.n:border-strong

.n:border-danger

.n:border-success

.n:border-warning

.n:border-info

.n:bg-accent

.n:text-accent - Accent text color

View color examples

Border Examples

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

.n:rounded-sharp

.n:rounded-s

.n:rounded-default

.n:rounded-pill

.n:rounded-circle

.n:border (1px)

.n:border-2 (2px)

.n:border-4 (4px)

.n:border-t (top only)

.n:border-r (right only)

.n:border-b (bottom only)

.n:border-l (left only)

.n:border-danger

.n:border-success

.n:border-warning

.n:border-info

.n:border-highlight

View border examples

Shadow Examples

Use Tailwind's shadow utilities with Nord shadow values.

.n:shadow

.n:shadow-card

.n:shadow-header

.n:shadow-nav

.n:shadow-popout

View shadow examples

Miscellaneous Utilities

Additional Nord-specific utilities:

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

Content above divider

Content below divider

.n:caption - Secondary text for captions and metadata

Regular paragraph text for comparison

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.

The quick brown fox jumps over the lazy dog

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.

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.

The quick brown fox jumps over the lazy dog

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.

<link rel="stylesheet" href="https://nordcdn.net/ds/tokens/2.0.4/tokens.custom-properties.css" integrity="sha384-XtHi70a2WlH468I3Z4gPGu2ihcHfE7IzpM+bF0cn9nEXAG67YmXsSpBSEYULYC7E" crossorigin="anonymous" />

The quick brown fox jumps over the lazy dog

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?
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.
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.
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 expedita maiores deserunt.
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?

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.
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?
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!
Dolore labore, consectetur eaque suscipit molestiae incidunt quos dolorum? Aspernatur odio laudantium temporibus at, dolore illum ullam animi in distinctio sint maxime libero itaque, consequuntur eveniet. Doloremque, ipsum nesciunt?
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.

Lorem ipsum dolor sit amet consectetur adipisicing elit.: Debitis quos exercitationem dolorem vitae doloremque delectus tempore tenetur quaerat maxime totam nihil praesentium, quae saepe fuga hic, aliquid, optio repellendus reprehenderit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.: Pariatur adipisci quas ducimus unde optio incidunt, dolor dolorum ex! Quos at error dolor veniam facere eaque possimus ullam perferendis, neque velit?
Lorem ipsum dolor sit, amet consectetur adipisicing elit.: Velit aspernatur culpa dolore non. Enim cupiditate nihil dignissimos deserunt itaque a quis quibusdam, similique sequi voluptatibus, inventore optio asperiores voluptatem sed?

The quick brown fox jumps over the lazy dog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eveniet hic officiis natus itaque dicta praesentium laborum, optio reprehenderit quas est nihil, pariatur, porro nostrum facere ea molestias debitis quia!

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?
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?

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.

View reset example

Typeset

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

The quick brown fox jumps over the lazy dog

<link rel="stylesheet" href="https://nordcdn.net/ds/tokens/2.0.4/tokens.custom-properties.css" integrity="sha384-XtHi70a2WlH468I3Z4gPGu2ihcHfE7IzpM+bF0cn9nEXAG67YmXsSpBSEYULYC7E" crossorigin="anonymous" />

The quick brown fox jumps over the lazy dog

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?
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.
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.
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 expedita maiores deserunt.
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?

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.
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?
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!
Dolore labore, consectetur eaque suscipit molestiae incidunt quos dolorum? Aspernatur odio laudantium temporibus at, dolore illum ullam animi in distinctio sint maxime libero itaque, consequuntur eveniet. Doloremque, ipsum nesciunt?
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.

Lorem ipsum dolor sit amet consectetur adipisicing elit.: Debitis quos exercitationem dolorem vitae doloremque delectus tempore tenetur quaerat maxime totam nihil praesentium, quae saepe fuga hic, aliquid, optio repellendus reprehenderit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.: Pariatur adipisci quas ducimus unde optio incidunt, dolor dolorum ex! Quos at error dolor veniam facere eaque possimus ullam perferendis, neque velit?
Lorem ipsum dolor sit, amet consectetur adipisicing elit.: Velit aspernatur culpa dolore non. Enim cupiditate nihil dignissimos deserunt itaque a quis quibusdam, similique sequi voluptatibus, inventore optio asperiores voluptatem sed?

The quick brown fox jumps over the lazy dog

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?
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?

View typeset example

Description List

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

Name: John Smith
Email: john.smith@example.com
Role: Software Engineer
Department: Engineering
Location: Helsinki, Finland

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

Email address

Enter your work email

This field is required

Email address We'll never share your email

Password Password must be at least 8 characters

View form examples

Grid

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

.n:grid-cols-12

.n:grid-cols-8

.n:grid-cols-6

.n:grid-cols-4

.n:grid-cols-3

.n:grid-cols-2

.n:grid-cols-2 .n:gap-xs

.n:grid-cols-2 .n:gap-s

.n:grid-cols-2 .n:gap-l

.n:grid-cols-2 .n:gap-xl

.n:grid-cols-2 .n:gap-xxl

.n:grid-cols-2 (no gap)

.n:mx-auto (centered)

.n:col-span-2

.n:grid-cols-4

.n:place-items-center

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:

.n:container - max-width: 1200px (default)

.n:container-xl - max-width: 2400px

.n:container-l - max-width: 1200px

.n:container-m - max-width: 1000px

.n:container-s - max-width: 800px

.n:container-xs - max-width: 600px

.n:container-xxs - max-width: 400px

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:

Copy code

<!-- 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>

Responsive visibility

xs+ s+ m+ l+ xl+

Resize to see badges appear at each breakpoint

Responsive layout

Item 1

Item 2

Item 3

Stacks vertically on mobile, horizontal on s+ screens

Responsive spacing

Gap increases at each breakpoint

Responsive text

This text grows with screen size

View breakpoint examples

Container Queries

Container queries let you style elements based on the size of their container rather than the viewport. This is useful for reusable components that need to adapt to their context.

Use n:@container to define a query container, then use container breakpoint variants like n:@s:, n:@m:, etc. to apply styles:

Copy code

<!-- Define a container -->
<div class="n:@container">
  <!-- Styles change based on container width -->
  <div class="n:flex n:flex-col n:@s:flex-row">
    <aside class="n:hidden n:@s:block">Sidebar</aside>
    <main>Content</main>
  </div>
</div>

You can also use named containers for more precise control:

Copy code

<div class="n:@container/sidebar">
  <p class="n:text-s n:@m/sidebar:text-l">Responds to "sidebar" container</p>
</div>

Container Breakpoint	Width
`@xs`	20rem (320px)
`@s`	24rem (384px)
`@m`	28rem (448px)
`@l`	32rem (512px)
`@xl`	36rem (576px)

B Bath Clinic

O Ocean Beach Clinic

P Park Animal Hospital

B Balboa Pet Hospital

Add another clinic

Customize style

Sign out from all clinics

Dashboard

Payments

All transactions

Payments

Disputes

Reports

Payments

Disputes

Payouts

Settings

Laura Williams

View profile

Settings

Show keyboard shortcuts

Cmd+K

Help & Support

API

Sign out

@Container driven responsive design

Create new

Export data as Spreadsheet

Responsive Grid

n:@container defines the query context. n:@s:grid-cols-2 and n:@l:grid-cols-3 adjust columns based on container width.

Revenue

Appointments

New Patients

Stack to Horizontal Layout

n:flex-col stacks items vertically by default. n:@s:flex-row switches to horizontal when container is wide enough.

Left Panel

Stacks on narrow containers

Right Panel

Side-by-side when wider

Conditional Visibility

n:hidden n:@m:block hides content on small containers, shows on medium+. n:@m:hidden does the opposite.

Visible on medium+ containers

Visible on small containers only

Always visible

Responsive Typography

n:text-l n:@m:text-xl n:@l:text-2xl scales text size based on container width.

This heading grows with the container

Body text can also adapt to available space

Named Containers

n:@container/card creates a named container. n:@s/card:flex-row targets that specific container.

Card A

Responds to its own container

Card B

Independent of sibling containers

View container query examples

States (Hover, Focus, etc.)

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

Copy code

<!-- 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:

Copy code

<!-- 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

Focus states

Active states

Disabled states

n:disabled:opacity-50

Group hover

Hover the card to change this text color (n:group-hover:text-on-accent)

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:

Copy code

@import "@nordhealth/css/tailwind";

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

Customizing Breakpoints

Nord provides these default breakpoints:

Breakpoint	Value	Pixels (at 16px base)
`xxs`	25rem	400px
`xs`	31.25rem	500px
`s`	38.75rem	620px
`m`	52.5rem	840px
`l`	62.5rem	1000px
`xl`	150rem	2400px

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

Copy code

@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:

Copy code

<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.

Tailwind CSS Recommended

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

@Container driven responsive design

Responsive Grid

Revenue

Appointments

New Patients

Stack to Horizontal Layout

Conditional Visibility

Responsive Typography

Named Containers

Was this page helpful?