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');
require('@tinypixelco/laravel-mix-wp-blocks');
require('laravel-mix-purgecss');
/*
|--------------------------------------------------------------------------
| 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.
|
*/
mix
.setPublicPath('./public')
.browserSync('http://localhost/sotonWebTheme/bedrock/web/');
mix
.sass('resources/styles/app.scss', 'styles')
.sass('resources/styles/editor.scss', 'styles')
.options({
processCssUrls: false,
postCss: ("resources/styles/app.css",
[require('tailwindcss')]),
})
.purgeCss({
enabled: mix.inProduction(),
folders: ['styles', 'views'],
extensions: ['html', 'js', 'php', 'vue'],
safelist: {
standard: [
'btn-toolbar',
'text-grey-light',
'nav-primary',
'nav-backdrop',
/^py-/,
/^px-/,
/^pt-/,
/^pb-/,
/^pl-/,
/^pr-/,
/^my-/,
/^mx-/,
/^mt-/,
/^mb-/,
/^ml-/,
/^mr-/,
/menu$/,
/^slick-/,
/^fancybox-/,
/^alert-/,
],
},
});
mix
.js('resources/scripts/app.js', 'scripts')
.js('resources/scripts/customizer.js', 'scripts')
.blocks('resources/scripts/editor.js', 'scripts')
.autoload({ jquery: ['$', 'window.jQuery'] })
.extract();
mix
.copyDirectory('resources/images', 'public/images')
.copyDirectory('resources/fonts', 'public/fonts');
mix
.sourceMaps()
.version();
Here is css file example
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!