@netlify/tailwind-config/README.md

Netlify's Tailwind CSS configuration

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