# @netlify/tailwind-config

> Netlify's Tailwind CSS configuration

Latest version **2.1.0** (published 2025-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @netlify/tailwind-config
pnpm add @netlify/tailwind-config
yarn add @netlify/tailwind-config
bun add @netlify/tailwind-config
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2025-04-07 |
| First published | 2024-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 56 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Netlify |
| Maintainers | seanroberts, biilmann, eduardoboucas, netlify-bot, akardet, sarahetter, mikewen, kathmbeck, hrishikeshk, vitaliyr, denar90, smnh, berdav, youvalv, serhalp-netlify, orinokai, rmulligan-netlify |
| Keywords | tailwind, css, design, tokens, netlify |

## Links

- npm: https://www.npmjs.com/package/@netlify/tailwind-config
- Repository: https://github.com/netlify/netlify-react-ui
- Homepage: https://github.com/netlify/netlify-react-ui/tree/main/libs/tailwind-config
- Issues: https://github.com/netlify/netlify-react-ui/issues
- npm.io page: https://npm.io/package/@netlify/tailwind-config

## Dependencies (3)

- [tailwindcss](https://npm.io/package/tailwindcss.md) ^3.4.1
- [@netlify/netlify-design-tokens](https://npm.io/package/@netlify/netlify-design-tokens.md) ^7.0.0
- [@tailwindcss/container-queries](https://npm.io/package/@tailwindcss/container-queries.md) ^0.1.1

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
- [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2025-04-07
- 1.0.0 (next) — 2024-03-07
- 2.0.0 — 2024-03-14
- 1.0.1 — 2024-03-07
- 0.0.1 — 2024-01-24

## README

# @netlify/tailwind-config

This package provides a shared Tailwind CSS configuration for Netlify products.

## Installation

To install the package, navigate to your project directory and run:

```sh
yarn add @netlify/tailwind-config
```

## Usage

In your `tailwind.config.cjs` file, import and use the configuration like this:

```js
// tailwind.config.cjs
module.exports = {
  presets: [require('@netlify/tailwind-config')],
  // ...
};
```

This will load the Netlify Tailwind configuration into your project's Tailwind configuration. You can then add your own custom configurations as needed.

## Referencing theme values in JavaScript

Generally, stick to styling elements using Tailwind CSS classes, `@apply`, or the `theme()` CSS helper.

That said, there are cases where you might need Tailwind theme values in your own client-side JavaScript — for example to pass tokens to theme a 3rd party library.

To make this easy, this package provides a `theme()` JavaScript helper you can use to access theme values with a similar syntax to Tailwind’s `theme()` CSS helper.

```js
import { theme } from '@netlify/tailwind-config/theme'
theme('spacing.4')
// => '1rem'

theme('borderWidth.DEFAULT')
// => '0.0625rem'

theme('screens.md')
// => '45.0625rem'
```

[List of all available tokens](https://unpkg.com/browse/@netlify/tailwind-config@0.0.1/theme.js)

**Note: to reference color tokens or box shadows in JavaScript, use the [`@netlify/netlify-design-tokens`](https://www.npmjs.com/package/@netlify/netlify-design-tokens) library:**

```js
import { colorFacetsTeal500 } from '@netlify/netlify-design-tokens';

const teal = colorFacetsTeal500;
```

### Updating the `theme()` JavaScript helper to the latest Tailwind config

Run this command to update `theme.ts`:

```sh
yarn nx run tailwind-config:buildTheme
```

Do not edit the theme file manually.

## Contributing

To contribute to this package, please follow the contribution guidelines provided in the main project's README.

## License

This package is licensed under the MIT license.

---
_Source: https://npm.io/package/@netlify/tailwind-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._