Wp Tailwindcss Theme Boilerplate Save

A boilerplate for WordPress theme development using TailwindCSS and Laravel Mix.

Getting started:

1. cd into your wp-content/themes directory
2. Run git clone https://github.com/mishterk/wp-tailwindcss-theme-boilerplate.git <theme-name-here> to clone this repo into a new theme.
   • Be sure to substitute <theme-name-here> with your desired theme name.
3. cd into your new theme directory
4. Run npm install
5. Duplicate the local-example.json file to local.json, then replace the proxy value with your local development hostname
   • This will allow you to use live reload/injection while working on your CSS/JS
6. Run a search & replace across the theme to replace all instances of 'WpTailwindCssThemeBoilerplate' with a PHP namespace specific to your theme/project
7. Change the theme information in style.css
8. Activate your theme
9. Run npm run dev and start coding

Commands

npm run dev

Assets will be compiled and BrowserSync will proxy the dev host allowing you to work while seeing your CSS and JS changes appear on the site as they are recompiled.

npm run webpack

Runs the development build

npm run prod

Runs the product build which includes asset file versioning and Purge CSS

Versioned Assets

Versioned assets will appear in a build directory alongside a manifest file which is used while enqueuing scripts and styles. This saves you the need to adjust version parameters on your assets and makes it possible to remove parameters on asset URLs without losing the ability to force those assets to update in browsers.

Purge CSS

Purge CSS is pretty darn excellent and is used to strip out any CSS that isn't being used during the production build.

It does this by looking through specified template files to work out which CSS selectors have been used. If it can't find a CSS rule being used in the templates, it removes it from the final CSS.

See the paths option in the mix.purgeCss() invocation in webpack.mix.js for the file paths being looked at.

How to tell Purge CSS to ignore things

The easiest way is to delineate your CSS with comments as per the example below. See safelisting for more options.

/* purgecss start ignore */
h1 {
  color: blue;
}

h3 {
  color: green;
}
/* purgecss end ignore */