https://github.com/mishterk/wp-tailwindcss-theme-boilerplate

A minimalist boilerplate for WordPress theme development using Tailwind CSS, SCSS, and Laravel Mix.
https://github.com/mishterk/wp-tailwindcss-theme-boilerplate

laravelmix tailwind tailwind-css tailwindcss wordpress wordpress-boilerplate wordpress-development wordpress-starter-theme wordpress-theme

Last synced: 26 days ago
JSON representation

A minimalist boilerplate for WordPress theme development using Tailwind CSS, SCSS, and Laravel Mix.

• Host: GitHub
• URL: https://github.com/mishterk/wp-tailwindcss-theme-boilerplate
• Owner: mishterk
• Created: 2019-11-14T03:53:57.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T00:50:18.000Z (almost 2 years ago)
• Last Synced: 2024-09-27T14:40:55.013Z (about 1 month ago)
• Topics: laravelmix, tailwind, tailwind-css, tailwindcss, wordpress, wordpress-boilerplate, wordpress-development, wordpress-starter-theme, wordpress-theme
• Language: JavaScript
• Homepage: https://philkurth.com.au/articles/wordpress-theme-using-tailwind-css/
• Size: 2.43 MB
• Stars: 363
• Watchers: 18
• Forks: 75
• Open Issues: 24
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
A boilerplate for WordPress theme development using [TailwindCSS](https://tailwindcss.com/) and [Laravel Mix](https://laravel.com/docs/5.8/mix).

## Getting started:

1. `cd` into your `wp-content/themes` directory

1. Run `git clone https://github.com/mishterk/wp-tailwindcss-theme-boilerplate.git ` to clone this repo into a new theme.

   - Be sure to substitute `` with your desired theme name.

1. `cd` into your new theme directory

1. Run `npm install`

1. 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

1. Run a search & replace across the theme to replace all instances of 'WpTailwindCssThemeBoilerplate' with a PHP 

namespace specific to your theme/project

1. Change the theme information in `style.css`

1. Activate your theme

1. 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](https://github.com/mishterk/wp-laravel-mix-theme-boilerplate/blob/master/includes/scripts-and-styles.php).

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](https://purgecss.com/safelisting.html) for more options.   

```css

/* purgecss start ignore */

h1 {

  color: blue;

}

h3 {

  color: green;

}

/* purgecss end ignore */

```