Development
Build something great, faster
Watch for changes, build for production and learn more about how _tw, WordPress 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.
Adding custom CSS
Everything you need to configure Tailwind or to add custom CSS can be found in the ./tailwind
folder. The ./tailwind/tailwind.css
file imports a variety of other files to generate style.css
and style-editor.css
. (You should never edit those files directly, as they will be overwritten when new versions are generated.) There are comments throughout the CSS files in the ./tailwind
folder explaining what to put in which 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
.
Please note that if one or more of your color palette’s slug
values matches a slug in Tailwind’s default color palette, those colors from the default palette—including all shades—will be overridden by the color
value from your theme.json
file.
(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 page-content
, entry-content
and comment-content
elements on the site.
Tailwind Typography customizations can be applied in specific contexts via modifier classes. For example, you could add a prose-sm
class to the comment-content
element to reduce the text size within comments.
To customize Tailwind Typography’s output theme-wide, use the included tailwind-typography.config.js
file to customize Tailwind Typography’s raw CSS. It removes the max-width
value and includes a color theme based on the neutral gray scale that Typography includes by default, pulling the primary
color from your theme.json
file for links. With that in place, you can swap in other theme colors for things like bullets and counters, and you could replace all of the included grays with a single body color if you wanted to do so.
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.
All Documentation
- Quickstart
Get started quickly, and deploy to production sooner than you expect
Fundamentals
- Installation
Generate your custom theme, install it in WordPress and run your first Tailwind builds - Development
Watch for changes, build for production and learn more about how _tw, WordPress and Tailwind work together - Deployment
Share your new WordPress theme with the world - Troubleshooting
Find solutions to potential issues and answers to frequently asked questions
Extras
- On Tailwind and WordPress
Understand how WordPress and Tailwind work together - Managing Styles for Custom Blocks
Learn strategies for using Tailwind in theme-specific custom blocks - Setting Up Browsersync
Add live reloads and synchronized cross-device testing to your workflow