Netlify's Tailwind CSS configuration
npm install @netlify/tailwind-configThis package provides a shared Tailwind CSS configuration for Netlify products.
To install the package, navigate to your project directory and run:
``sh`
yarn add @netlify/tailwind-config
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.
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'
`
Note: to reference color tokens or box shadows in JavaScript, use the @netlify/netlify-design-tokens library:
`js
import { colorFacetsTeal500 } from '@netlify/netlify-design-tokens';
const teal = colorFacetsTeal500;
`
Run this command to update theme.ts:
`sh``
yarn nx run tailwind-config:buildTheme
Do not edit the theme file manually.
To contribute to this package, please follow the contribution guidelines provided in the main project's README.
This package is licensed under the MIT license.