🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@netlify/tailwind-config

Package Overview
Dependencies
Maintainers
17
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@netlify/tailwind-config

Netlify's Tailwind CSS configuration

2.1.0
latest
Source
npm
Version published
Weekly downloads
56K
12.01%
Maintainers
17
Weekly downloads
 
Created
Source

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

Keywords

tailwind

FAQs

Package last updated on 07 Apr 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts