GitHub - jeffreyvr/tailpress: TailPress is a minimal boilerplate theme for WordP...
source link: https://github.com/jeffreyvr/tailpress
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Introduction
TailPress is a minimal boilerplate theme for WordPress using Tailwind CSS.
Getting started
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"
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.
Regular method
- Clone repo
git clone https://github.com/jeffreyvr/tailpress.git && cd tailpress
- Run
rm -rf .git
to remove git (orrmdir .git
for Windows) - Run
npm install
- Run
npm run watch
to start developing
General
TailPress uses the Tailwind CLI, PostCSS and esbuild.
Tailwind CSS JIT is used to allow for fast 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
.
NPM Scripts
There are several NPM scripts available. You'll find the full list in the package.json
file onder "scripts". A script is executed through the terminal by running npm run script-name
.
browser-sync
.
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 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.
Define theme colors and font sizes
Several colors and font sizes are defined from the beginning. You can modify the colors in theme.json
.
PurgeCSS
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.
Links
Contributors
License
MIT. Please see the License File for more information.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK