TailPress is a minimal boilerplate theme for WordPress using Tailwind CSS.
Using the installer
You can get started using the installer (using composer):
composer global require jeffreyvanrossum/tailpress-installer tailpress new example-theme
If you haven't already, make sure to place the
~/.composer/vendor/bin directory in your
PATH so the tailpress executable is found when you run the tailpress command in your terminal.
You can optionally set the theme name.
tailpress new example-theme --name="Example Theme"
By default, TailPress uses Laravel Mix for compiling. Rather use Esbuild?
tailpress new example-theme --compiler="esbuild"
You can also initialize a new Git repository (branch defaults to
tailpress new example-theme --name="Example Theme" --git --branch="main"
Once your theme is ready, don't forget to cd into the directory.
You will be asked if you would like to have WordPress installed as well. Keep in mind that you still need a local development environment for PHP and MySQL.
- Clone repo
git clone https://github.com/jeffreyvr/tailpress.git && cd tailpress
rm -rf .gitto remove git (or
rmdir .gitfor Windows)
npm run watchto start developing
Before you use your theme in production, make sure you run
npm run production.
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.
|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.|
Block editor support
TailPress comes with support for the block editor.
A basic setup for
theme.json is included. This also means that you need to at least use WordPress 5.8. If you wan't to support earlier WordPress versions, you can use an older version of TailPress instead.
CSS-classes for alignment (full, wide etc.) are generated automatically. You can opt-out on this by removing the plugin from the
To make the editing experience within the block editor more in line with the front end styling, a
editor-style.css is generated.
Define theme colors and font sizes
Several colors and font sizes are defined from the beginning. You can modify them in
- TailPress website
- Tailwind CSS Documentation
- Laravel Mix Documentation
- Esbuild Documentation
MIT. Please see the License File for more information.