Neighborhood CSS

Neighborhood CSS brings the tokens to your own markup. It’s an extension of Tailwind CSS v4 (opens in new tab) with every utility prefixed nbhd: and built only from Neighborhood tokens. It also has a few plain CSS classes for containers, buttons and links.

Every value is a live token, so the same classes follow whichever brand theme the page loads.

When to use it

• Use the components for anything a component covers: sections, cards, forms, navigation.
• Use Neighborhood CSS for the layout and small pieces around them: spacing between sections, a grid of components, a styled note in a page template.
• Use the CSS classes where a plain HTML element fits better than a component, such as a button in content you don’t control.

With Tailwind

Neighborhood CSS needs Tailwind CSS 4.1 or later in your project, with one of its build tools (@tailwindcss/vite, @tailwindcss/postcss or @tailwindcss/cli).

npm install @fbin-web/neighborhood-css tailwindcss @tailwindcss/vite

In your main stylesheet, import one Neighborhood CSS entry instead of tailwindcss:

/* A brand */
@import '@fbin-web/neighborhood-css/brands/moen.css';

/* Or the unbranded tokens */
@import '@fbin-web/neighborhood-css';

Each entry includes Tailwind with the nbhd prefix, the tokens and the Neighborhood classes. Brand entries are available for aqualisa, august, cfg, emtek, fbin, fypon, house-of-rohl, larson, master-lock, moen, moen-flo, solar-innovations, therma-tru, waste-king and yale.

Without Tailwind

Precompiled stylesheets are available for projects without Tailwind:

<link rel="stylesheet" href="/assets/neighborhood-css/brands/neighborhood.moen.css" />

Copy them from @fbin-web/neighborhood-css/dist/. They include the tokens, base styles and the Neighborhood classes, but no utilities: Tailwind generates utilities from your markup, so they need the Tailwind build.

Brand fonts

The tokens set each brand’s font families, but the font files themselves come from the brands package. For brands with web fonts, also load the brand’s fonts stylesheet:

@import '@fbin-web/neighborhood-brands/dist/moen/neighborhood.moen.fonts.css';

With the Web Components

Neighborhood CSS and the Web Components read the same tokens, so they work side by side. Keep loading the brand stylesheet from Installation for the components, and use Neighborhood CSS for the markup around them.

Utilities

Utilities use Tailwind’s usual syntax with nbhd: first, including for variants: nbhd:hover:text-link-hover-foreground, nbhd:md:p-8.

Only semantic colors are available as utilities, so colors always say what they’re for and follow the brand. Tailwind’s default palette, scales and breakpoints are removed.

Spacing follows the brand’s step size, so nbhd:p-4 is 16px by default and 20px on Moen.

Typography roles

nbhd:typography-<role> sets font family, size, weight and line height together, including any size changes at larger breakpoints. The roles are display, headline, subheading, eyebrow, body, bodySmall, label, supporting, action, control and badge.

<h2 class="nbhd:typography-headline nbhd:mb-4">Find your finish</h2>
<p class="nbhd:typography-body nbhd:text-text-primary">Every faucet comes in six finishes.</p>

CSS classes

<div class="nbhd-container">…</div>

<button class="nbhd-button nbhd-button-primary">Add to cart</button>
<a class="nbhd-button nbhd-button-secondary" href="/stores">Find a store</a>

<a class="nbhd-link" href="/warranty">See the warranty</a>

Button styles are primary, secondary, tertiary, plain, link and unstyled. Add nbhd-button-icon-only for a button with only an icon, and give it an aria-label.

The classes use the same component tokens as the matching Web Components. They sit in Tailwind’s components layer, so nbhd: utilities override them.