Introduction

This theme is a minimal boilerplate theme for WordPress using Tailwind CSS.

Getting started

• Run npm install
• Run npm run watch to start developing

General

You will find the editable CSS and Javascript files within the /src folder.

Before you use your theme in production, make sure you run npm run production.

NPM Scripts

There are several NPM scripts available. You'll find the full list in the package.json file under "scripts". A script is executed through the terminal by running npm run script-name.

Script	Description
production	Creates a production (minified) build of app.js, app.css and editor-style.css.
dev	Creates a development build of app.js, app.css and editor-style.css.
watch	Runs several watch scripts concurrently.

Tips

Styling within the block editor

To make the editing experience within the block editor more in line with the front end styling, a editor-style.css is generated.

CSS classes generated by Theme

CSS classes for alignment (full, wide etc.) are generated automatically. You can opt-out on this by removing the plugin from the tailwind.config.js file.

Customize colors

Several colors and font sizes are defined from the beginning. You can modify them in theme.json.

Translation

For the theme translation or localization string support to work properly, you need to generate the .mo file. While in the language theme folder, run:

    msgfmt pt_BR.po -o pt_BR.mo

Links

• Tailwind CSS Documentation
• Laravel Mix Documentation
• Esbuild Documentation

Author

• Denis Almeida