TailPress is a minimal boilerplate theme for WordPress using Tailwind CSS, with PostCSS and Laravel Mix.
- Clone repo
git clone https://github.com/jeffreyvr/tailpress.git && cd tailpress - Run
rm -rf .gitto remove git (orrmdir .gitfor Windows) - Run
npm install - Run
npx mix - Run
npx mix watchto start developing
You can also get started using the installer:
composer global require jeffreyvanrossum/tailpress-installer
tailpress new example-themeYou can optionally set the theme name.
tailpress new example-theme --name="Example Theme"You can also initialize a new Git repository (branch defaults to main):
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.
You will find the editable CSS and Javascript files within the /resources folder.
Before you use your theme in production, make sure you run npx mix --production.
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 tailwind.config.js file.
To make the editing experience within the block editor more in line with the front end styling, a editor-style.css is generated.
Several colors and font sizes are defined from the beginning. You can modify the colors in theme.json.
To better organize the theme and allow for easier purging, a subfolder called theme is created. Here you will find the template files like header.php, footer.php, single.php.
To make this work a additional class has been created and placed within the includes folder. If you don't like this setup, you can of course still use previous versions of TailPress instead.
Tailwind CSS JIT is used to allow for fast compiling.
By default, PurgeCSS is enabled. You can modify or disable it by changing the settings in the tailwind.config.js file. There are several PurgeCSS options.
MIT. Please see the License File for more information.