Need help with wp-tailwindcss-theme-boilerplate?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mishterk
182 Stars 33 Forks 50 Commits 6 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

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 */

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.