Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


ByMattLee WP Starter Theme

A starter boilerplate WordPress theme featuring Gulp, Tailwind CSS, rollup.js, Alpine.js and Taxi.js.


1. Install Node 16.17.1 LTS:
2. Install Yarn:
3. Install all dependencies
$ yarn


Update Gulp Config

All Gulp settings can be found in gulpfile.babel.js/config.js. To connect BrowserSync to the local development environment to enable browser reload, update browserSync.proxy to local development address.


Build Files For Development And Initialize Watch
$ yarn dev
Build Files For Staging
$ yarn stage
Build Files For Production
$ yarn prod

General Features

  • Features Gulp as the build pipeline that compiles styles and scripts, and optimizes assets
  • Browser reload when PHP, JS, image, SVG or asset files are updated
  • Styles are injected when SCSS files are updated
  • Includes base WordPress template files and optimized theme setup
  • Advanced Custom Fields PRO plugin is recommended to create custom fields and Option pages. Default settings can be imported from acf-global-options.json
  • Features Tailwind CSS, a utility-first framework
  • Includes linter (Stylelint), autoprefixer, minification and sourcemap creation
  • SCSS files are located in assets/src/scss
  • main.scss in assets/src/scss serves as the base that includes the other dependent SASS files
  • main.scss gets compiled to assets/dist/css/main.min.css
  • .stylelintrc contains the settings for Stylelint
  • Info about class namespacing can be found in src/assets/scss/main.scss
  • Unused CSS (PurgeCSS) will be removed in staging and production builds
  • Features rollup.js as the module bundler
  • Includes linting (ESLint), concatenation, minification and sourcemap creation
  • Includes Taxi.js for seamless page transitions
  • Includes a custom framework for reuseable content animations
  • Includes Alpine.js for declarative DOM manipulation
  • main.js in src/assets/js serves as the main JS file that includes and runs all components and will be compiled to dist/assets/js/main.min.js
  • All local components should be placed in src/assets/js/components
  • All vendor JS can be manually added to src/assets/js/vendors if not found on Yarn
  • .eslintrc contains the settings for ESLint
  • Place all unoptimized images in the assets/src/images directory
  • They will then be optimized and placed in assets/dist/images
  • Place all SVG files in the assets/src/svg directory
  • They will then be optimized and added to a sprite at assets/dist/svg/sprite.svg
Other Assets
  • All assets (fonts, videos, swfs, etc) under assets/src will be copied to assets/dist on build

Tailwind CSS Notes

  • All Tailwind settings can be found in ./tailwind.config.js
  • Most styles should be written as utility classes in the template markup but custom SCSS can be used for unique properties and/or magic numbers
  • Utilize the @apply directive when writing custom SCSS for efficiency:
svg {
    @apply u-inline-block u-fill-current;
  • Tailwind settings can be accessed with the theme() function:
.button {
    animation-duration: theme('transitionDuration.normal');
  • Media queries can be used with the shorthand screen() function:
.button {
    margin-right: 2.8rem;
    @screen sm {
        margin-right: 4.2rem;


  • Matt Lee - @bymattlee on most platforms
  • Visit my website at

Twitter Follow