@netlify/tailwind-config

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

yarn add @netlify/tailwind-config

Usage

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

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

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

Note: to reference color tokens or box shadows in JavaScript, use the @netlify/netlify-design-tokens library:

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:

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.