100 lines
4.1 KiB
Markdown
100 lines
4.1 KiB
Markdown
<p><img src="http://tailpress.io/images/tailpress100.svg" width="260" alt="TailPress"></p>
|
|
|
|
[](https://github.com/jeffreyvr/tailpress/releases/)
|
|
[](#license)
|
|
|
|
# Introduction
|
|
|
|
TailPress is a minimal boilerplate theme for WordPress using [Tailwind CSS](https://tailwindcss.com/).
|
|
|
|
## Getting started
|
|
|
|
### Using the installer
|
|
|
|
You can get started using the installer (using composer):
|
|
|
|
```bash
|
|
composer global require jeffreyvanrossum/tailpress-installer
|
|
|
|
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"`
|
|
- Choose your compiler, mix or esbuild: `--compiler="esbuild"`
|
|
- 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.
|
|
|
|
### Regular method
|
|
|
|
* 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
|
|
|
|
### General
|
|
|
|
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`.
|
|
|
|
## 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 TailPress
|
|
|
|
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`.
|
|
|
|
### 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)
|
|
* [Esbuild Documentation](https://esbuild.github.io)
|
|
|
|
## 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.
|