Skip to content

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.

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

Using Browsersync

Because your development environment may have its own approach to Browsersync-like functionality, Browsersync is not included by default. You can install it as follows (in the same place you ran npm install earlier):

npm install browser-sync --save-dev

If you’re using a custom .test domain for local development, you can use Browsersync’s proxy mode with that domain by adding the following line to the scripts section of your package.json file alongside the other watch:* commands:

"watch:browser-sync": "browser-sync start --proxy \"development-website.test\" --files \"theme\" --no-notify --no-inject-changes",
Code language: plaintext (plaintext)

You’ll just need to update development-website.test to match your local development domain.


All Documentation

  • Quickstart
    Get started quickly, and deploy to production sooner than you expect
  • 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