Skip to content

Documentation

Getting started with _tw

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

Installing Tailwind

After unzipping your generated theme archive, your first step is to install npm if you haven’t already. After that, open your terminal of choice, navigate to your theme repository and run:

npm install

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

npm run dev

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

Setting up your development environment

Your generated theme will have the following folder structure:

generated-theme-slug ├── scripts ├── tailwind └── theme
Code language: plaintext (plaintext)

Alongside those folders you’ll find an assortment of package and configuration files that aren’t meant to be uploaded to WordPress as part of a theme. The theme itself lives in the theme folder, keeping those files together and uncluttered.

However, this folder structure means you can’t place your theme repository directly in your wp-content/themes folder.

This is one approach to locating your theme repository relative to your WordPress installation for local development:

development-website.test ├── generated-theme-slug │ ├── scripts │ ├── tailwind │ └── theme ├── log ├── provision └── public_html ├── wp-admin ├── wp-content └── wp-includes
Code language: plaintext (plaintext)

This places the theme repository in the development site’s root folder (development-website.test in the example above), one level above WordPress (located in the public_html folder). With the repository in this location, you can then navigate to the wp-content/themes folder and create a symbolic link to place the generated theme’s theme subfolder into the WordPress themes directory:

ln -s ../../../generated-theme-slug/theme generated-theme

After activating the theme in WordPress, any changes made to the theme will be immediately reflected on the development site.

Another option is to place the theme repository in the wp-content folder, navigate to wp-content/themes and then run:

ln -s ../generated-theme-slug/theme generated-theme

And remember, this is just for local development; please see the page on deploying to production for details on moving from local development to a staging or production server.

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