Documentation
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.
JavaScript
The default build process includes esbuild, an extremely performant JavaScript bundler.
To use it, simply edit the javascript/script.js
file in your theme repository’s root directory. The existing build process will create an output file at theme/js/script.min.js
with a target environment of esnext
. This is esbuild’s default, but it is also set explicitly in the package.json
file, so you can easily update the target environment there if necessary.
If you’re new to JavaScript bundlers, you should be aware that any variables or functions that you’d like to be available globally need to be added to the global object. For a variable, you would do something like this:
window.myVariable = 'An important string';
Code language: JavaScript (javascript)
And for a function, something like this:
window.myFunction = function( myParameter ) {
return myParameter++;
}
Code language: JavaScript (javascript)
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
.
(Still not using the block editor? You can safely ignore the included theme.json
support entirely!)
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 max-w-none 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.
Next Up
Deploying to production
Put your new WordPress theme somewhere the rest of the world can see it
All Documentation
- Custom WordPress themes, now with Tailwind
Start quickly, or start from the very beginning - WordPress and Tailwind: An introduction
Learn how Tailwind and WordPress work best together and when they should be kept apart - Generate your custom theme
The first step on your path to adding Tailwind to your WordPress development toolkit - Getting started with _tw
Install Tailwind, set up your development environment and run your first Tailwind builds - Tailwind plugins and more npm commands
Watch for changes, build for production and learn more about how _tw and Tailwind work together - Deploying to production
Put your new WordPress theme somewhere the rest of the world can see it