balefire is a minimal boilerplate theme for WordPress using Tailwind CSS.
This theme uses the ESBuild version of balefire-tailwind.
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 git@github.com:nusserstudios/balefire-tailwind.git && cd balefire - Install Bun
curl -fsSL https://bun.sh/install | bashmore info here - Run
rm -rf .gitto remove git (orrmdir .gitfor Windows) - Run
bun ito install dependencies - Run
bun run syncto start developing - Run
bun run buildto run production build
Production files are located in the /src folder.
You will find the editable CSS and Javascript files within the /assets folder. SRC is where the build files are output to, if you change these, then the when you run bun build these files are recompiled, and your changes will be overwritten.
Before you use your theme in production, make sure you run bun build.
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 bun script-name.
| Script | Description |
|---|---|
| build | 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. |
| sync | Browsersync via localhost, and reloads the page when changes are detected. |
balefire-tailwind 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 balefire 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 them in theme.json.
MIT. Please see the License File for more information.