Sage 10 - doesn't compile tailwindcss classes

Here is my package.json

type or paste {
  "name": "chio",
  "private": true,
  "browserslist": [
    "extends @wordpress/browserslist-config"
  "engines": {
    "node": ">=12.14.0"
  "scripts": {
    "build": "TAILWIND_MODE=build mix",
    "build:production": "mix --production",
    "produ": "TAILWIND_MODE=build mix --production",
    "start": "mix watch",
    "hot": "mix watch --hot",
    "clear": "wp acorn optimize:clear",
    "test": "npm run lint",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint resources/scripts",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
  "devDependencies": {
    "@tailwindcss/typography": "^0.4.1",
    "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
    "@wordpress/babel-preset-default": "^6.1.0",
    "@wordpress/browserslist-config": "^4.0.0",
    "@wordpress/dependency-extraction-webpack-plugin": "^3.1.3",
    "autoprefixer": "^10.4.0",
    "babel-eslint": "^10.1.0",
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.3.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.3",
    "laravel-mix": "^6.0.19",
    "postcss": "^8.3.0",
    "purgecss-webpack-plugin": "^4.0.3",
    "sass": "^1.34.0",
    "sass-loader": "11.1.1",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "tailwindcss": "^2.2.7"
  "peerDependencies": {
    "jquery": "^3.5.1"
  "dependencies": {
    "@fancyapps/fancybox": "^3.5.7",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/pro-solid-svg-icons": "^5.15.3",
    "fs": "^0.0.1-security",
    "laravel-mix-purgecss": "^6.0.0",
    "lozad": "^1.16.0",
    "mixitup": "^3.3.1",
    "postcss-loader": "~3.0.0",
    "slick-carousel": "^1.8.1"
code here

Here is my webpack.mix.js

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

 | Mix Asset Management
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Sage application. By default, we are compiling the Sass file
 | for your application, as well as bundling up your JS files.


  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
    processCssUrls: false,
    postCss: ("resources/styles/app.css",
    enabled: mix.inProduction(),
    folders: ['styles', 'views'],
    extensions: ['html', 'js', 'php', 'vue'],
    safelist: {
      standard: [

  .js('resources/scripts/app.js', 'scripts')
  .js('resources/scripts/customizer.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({ jquery: ['$', 'window.jQuery'] })

  .copyDirectory('resources/images', 'public/images')
  .copyDirectory('resources/fonts', 'public/fonts');


Here is css file example
@apply -  localhost

For some reason, when I’m trying to any tailwind css classes they not work. Doesn’t matter if I use them in my scss files or inline in HTML

I’m not getting any errors while running yarn start or yarn build:production. however I get an error when I try to run yarn build

$ TAILWIND_MODE=build mix
'TAILWIND_MODE' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.

Any suggestion how I can fix tailwind css?

Thanks in advance!

This topic was automatically closed after 42 days. New replies are no longer allowed.