Underscores & 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
# 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
# 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
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: [],
}