Skip to content

Documentation

Getting started with _tw

Install Tailwind, set up your development environment and run your first Tailwind builds

Moving your theme into place

After unzipping your generated theme archive, you should move it into the correct folder.

The easiest and quickest way to get started is simply to move your generated theme folder into the wp-content/themes folder in your local development environment.

Depending on your requirements, you may want to move your generated theme folder elsewhere in your local development and then create a symbolic link from the theme folder in your generated theme to wp-content/themes/[theme-slug].

Installing Tailwind

Your first step before installing Tailwind is to install npm if you haven’t already. After that, open your terminal of choice, navigate to your generated theme folder and run:

npm install

With Tailwind now installed, you can then generate your style.css file by running:

npm run dev

This creates a development build of your theme’s stylesheet.

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.


Next Up

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


All Documentation