https://github.com/jeffreyvr/tailpress
TailPress is a minimal boilerplate theme for WordPress using Tailwind CSS.
https://github.com/jeffreyvr/tailpress
tailwind tailwindcss wordpress-theme wordpress-theme-boilerplate
Last synced: 4 days ago
JSON representation
TailPress is a minimal boilerplate theme for WordPress using Tailwind CSS.
- Host: GitHub
- URL: https://github.com/jeffreyvr/tailpress
- Owner: jeffreyvr
- License: mit
- Created: 2019-10-21T19:20:19.000Z (over 5 years ago)
- Default Branch: 4.x
- Last Pushed: 2025-03-16T12:16:18.000Z (30 days ago)
- Last Synced: 2025-04-11T05:08:35.248Z (4 days ago)
- Topics: tailwind, tailwindcss, wordpress-theme, wordpress-theme-boilerplate
- Language: PHP
- Homepage: https://tailpress.io
- Size: 2.6 MB
- Stars: 1,330
- Watchers: 34
- Forks: 163
- Open Issues: 1
-
Metadata Files:
- Readme: README.MD
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- stars - jeffreyvr/tailpress - TailPress is a minimal boilerplate theme for WordPress using Tailwind CSS. (PHP)
README
## About TailPress
TailPress is a minimal boilerplate theme for WordPress using [Tailwind CSS](https://tailwindcss.com/).
## Getting started
You can use the TailPress [installer](#installer), or you can simply [clone](#clone-repository) this repository.
### Installer
To use installer, you need to install it globally via Composer:
`composer global require jeffreyvanrossum/tailpress-installer`
Afterwards, you can run:
`tailpress new example-theme`
*If the tailpress command is not found, make sure to place Composer's global vendor bin in your `$PATH` ([see](#command-tailpress-not-found)).*
Flags you can pass when using the installer:
- Set a theme name `--name="Example Theme"`
- Initialize a git repository `--git`
- Set the git branch name `--branch="main"`
If you choose to install WordPress through the installer, these flags might be of interest as well:
`--dbname`, `--dbuser`, `--dbpass` and `--dbhost`.
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 repository
* Clone repo `git clone https://github.com/jeffreyvr/tailpress.git && cd tailpress`
* Run `rm -rf .git` to remove git (or `rmdir .git` for Windows)
* Run `npm install`
* Run `npm run watch` to start developing
## Resources and compiling
You will find the editable CSS and Javascript files within the `/resources` folder.
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`.
| 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 | Recompiles after changes are made. |
## 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 TailPress
CSS classes for alignment (full, wide etc.) are located in `resources/css/utilities.css`.
### Customize colors
Several colors and font sizes are defined `theme.json` and the resulting variables are used in the `resources/css/theme.css` file.
### Command `tailpress` not found
Make sure to place Composer's global vendor bin directory in your `$PATH` so the `tailpress` executable can be found by your system. This directory exists in different locations based on your operating system; however, some common locations include:
- macOS: `$HOME/.composer/vendor/bin`
- Windows: `%USERPROFILE%\AppData\Roaming\Composer\vendor\bin`
- GNU / Linux Distributions: `$HOME/.config/composer/vendor/bin or $HOME/.composer/vendor/bin`
You could also find the composer's global installation path by running `composer global about` and looking up from the first line.
## Links
* [TailPress website](https://tailpress.io)
* [Screencasts](https://www.youtube.com/playlist?list=PL6GBdOp044SHIOSCZejodwr1HcYsC43wG)
* [Tailwind CSS Documentation](https://tailwindcss.com/docs)
* [Laravel Mix Documentation](https://laravel-mix.com)
## Contributors
* [Jeffrey van Rossum](https://github.com/jeffreyvr)
* [All contributors](https://github.com/jeffreyvr/tailpress/graphs/contributors)
## License
MIT. Please see the [License File](/LICENSE) for more information.