Skip to content
A minimalist boilerplate for WordPress theme development using Tailwind CSS, SCSS, and Laravel Mix.
JavaScript PHP CSS
Branch: master
Clone or download
Latest commit 1dfe74f Nov 30, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Replace namespace Nov 29, 2019
assets Merge branch 'upstream/master' Nov 14, 2019
includes Replace namespace Nov 29, 2019
templates
.gitignore Localise proxy setting using config json Nov 13, 2019
footer.php Add document open/close partials Nov 13, 2019
functions.php
header.php Add document open/close partials Nov 13, 2019
index.php Correct case Nov 29, 2019
local-example.json Localise proxy setting using config json Nov 13, 2019
package-lock.json
package.json Tailwind CSS and Laravel Mix installed and set up Nov 14, 2019
readme.md Update readme.md Nov 29, 2019
style.css Update theme stylesheet meta Nov 17, 2019
tailwind-example.js Tailwind CSS and Laravel Mix installed and set up Nov 14, 2019
tailwind.js Add some base config Nov 29, 2019
webpack.mix.js

readme.md

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

Getting started:

  1. Clone into an empty theme directory
  2. cd into your new theme directory
  3. Run npm install
  4. 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
  5. Run a search & replace across the theme to replace all instances of 'WpTailwindCssThemeBoilerplate' with a PHP namespace specific to your theme/project
  6. Change the theme information in style.css
  7. Activate your theme
  8. 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 whitelisting for more options.

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

h3 {
  color: green;
}
/* purgecss end ignore */
You can’t perform that action at this time.