Underscores & TailwindCSS

1. Create Unscores theme

• https://underscores.me/
• Ensure Sassify is clicked

2. Install TailwindCSS

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

3. Setup your style.scss file

• https://tailwindcss.com/docs/installation#2-add-tailwind-to-your-css
• Navigate to the sass directory
• Open the style.scss file
• Add the tailwind directives after the commented table of contents
• This will ensure your tailwind classes are generated before the included CSS, which allows you to use the @apply tailwind directive and use your utility classes in your WordPress styles

@tailwind base;

@tailwind components;

@tailwind utilities;

4. Publish the TailwindCSS config file

npx tailwindcss init

5. Install Laravel Mix

# Using npm
npm install laravel-mix --save-dev

# Using yarn
yarn add laravel-mix --dev

6. Publish the Laravel Mix config file

cp node_modules/laravel-mix/setup/webpack.mix.js ./

7. Update the default Laravel Mix config for Tailwind

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss')

mix.sass('sass/style.scss', 'style.css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('tailwind.config.js') ],
  });

8. Add the Laravel Mix scripts to your package.json file

• https://laravel-mix.com/docs/5.0/installation#npm-scripts
• You will need to rename the Laravel Mix watch command because underscores also defines a watch command
• You will probably need to install cross-env as well

# Using npm
npm install cross-env --save-dev

# Using yarn
yarn add cross-env --dev

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "mix-watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

9. Trying compiling your assets

npm run dev

10. Update your Tailwind config to purge your unused CSS

• This is an example config, please edit to match your needs

module.exports = {
    purge: [
        './inc/**/*.php',
        './js/**/*.js',
        './sass/**/*.scss',
        './template-parts/**/*.php',
    ],
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}