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