Tailwind plugins and more npm commands

Watch for changes, build for production and learn more about how _tw and Tailwind work together

Watching for changes

During development you’ll want Tailwind to be watching your theme repository for changes and regenerating your style.css file automatically:

npm run watch

The watch command will run continuously in the background, keeping things up-to-date.

Building for production

Before deployment, you’ll want to create a production build:

npm run prod

This ensures all unneeded CSS declarations have been removed and also minifies the resulting style.css file.

theme.json

Now with built-in theme.json support, _tw includes a basic theme.json file in its theme folder. The color and width values from that file are automatically made available to Tailwind via a Tailwind plugin.

This means the top-level colors in theme.json can be used in Tailwind (with classes like bg-primary or text-primary), and the values for contentSize and wideSize are available for setting max-width with either max-w-content or max-w-wide.

Tailwind Typography

Tailwind Typography comes preinstalled with _tw, set up to automatically apply its styles to all entry-content blocks on the site.

Most Tailwind Typography customizations can be applied via modifier classes. _tw uses modifier classes to set the initial text color for body copy and links. You can add to or change these modifier classes in tailwind/custom/components.css inside the following block:

$post-content-selector {
	@apply prose prose-neutral prose-a:text-primary;
}
Code language: SCSS (scss)

You can also customize Tailwind Typography’s raw CSS by adding your overrides to the included tailwind-typography.config.js file.

Tailwind plugins

Tailwind’s other first-party plugins are automatically installed when you run npm install, but they won’t be active until you uncomment the appropriate line or lines in the plugins block of your tailwind.config.js file.