I tried this, but get still an error, when running yarn build:
● Mix █████████████████████████ done (99%)
plugins
ERROR in ./resources/styles/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: node.clone is not a function
at /home/markus/code/blog/web/app/themes/dev-theme/node_modules/tailwindcss/jit/lib/utils.js:94:35
at Array.map (<anonymous>)
at cloneNodes (/home/markus/code/blog/web/app/themes/dev-theme/node_modules/tailwindcss/jit/lib/utils.js:94:16)
at /home/markus/code/blog/web/app/themes/dev-theme/node_modules/tailwindcss/jit/lib/expandTailwindAtRules.js:257:35
at LazyResult.runOnRoot (/home/markus/code/blog/web/app/themes/dev-theme/node_modules/postcss/lib/lazy-result.js:303:16)
at LazyResult.runAsync (/home/markus/code/blog/web/app/themes/dev-theme/node_modules/postcss/lib/lazy-result.js:355:26)
at LazyResult.async (/home/markus/code/blog/web/app/themes/dev-theme/node_modules/postcss/lib/lazy-result.js:205:30)
at LazyResult.then (/home/markus/code/blog/web/app/themes/dev-theme/node_modules/postcss/lib/lazy-result.js:190:17)
at processResult (/home/markus/code/blog/web/app/themes/dev-theme/node_modules/webpack/lib/NormalModule.js:675:19)
at /home/markus/code/blog/web/app/themes/dev-theme/node_modules/webpack/lib/NormalModule.js:777:5
at /home/markus/code/blog/web/app/themes/dev-theme/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /home/markus/code/blog/web/app/themes/dev-theme/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/home/markus/code/blog/web/app/themes/dev-theme/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/home/markus/code/blog/web/app/themes/dev-theme/node_modules/postcss-loader/dist/index.js:96:7)
The package.json:
{
"private": true,
"browserslist": [
"extends @wordpress/browserslist-config"
],
"engines": {
"node": ">=12.14.0"
},
"scripts": {
"build": "TAILWIND_MODE=build mix",
"build:production": "TAILWIND_MODE=build mix --production",
"start": "TAILWIND_MODE=watch 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.0",
"@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
"@wordpress/babel-preset-default": "^5.0.1",
"@wordpress/browserslist-config": "^3.0.1",
"@wordpress/dependency-extraction-webpack-plugin": "^3.0.1",
"babel-eslint": "^10.1.0",
"browser-sync": "^2.26.14",
"browser-sync-webpack-plugin": "^2.3.0",
"eslint": "^7.20.0",
"eslint-plugin-import": "^2.22.1",
"laravel-mix": "^6.0.11",
"postcss": "^8.2.6",
"sass": "^1.32.7",
"sass-loader": "11.0.1",
"stylelint": "^13.10.0",
"stylelint-config-standard": "^20.0.0",
"tailwindcss": "^2.1"
},
"dependencies": {
"@tailwindcss/forms": "^0.2.1",
"@tailwindcss/line-clamp": "^0.2.0",
"alpinejs": "^2.8.0",
"tailwindcss-fl": "^0.3.0"
}
}
and the webpack.mix.js:
const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');
/*
|--------------------------------------------------------------------------
| 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('dev-blog.ddev.site');
mix
.sass('resources/styles/app.scss', 'styles')
.sass('resources/styles/editor.scss', 'styles')
.options({
processCssUrls: false,
postCss: [require('tailwindcss')],
});
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();
and finally the tailwind config:
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
mode: 'jit',
purge: {
content: [
'./app/**/*.php',
'./resources/**/*.php',
'./resources/**/*.vue',
'./resources/**/*.js',
],
},
darkMode: 'media', // or 'media' or 'class'
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
gray: colors.trueGray,
blue: colors.lightBlue,
red: colors.red,
yellow: colors.amber,
},
fontFamily: {
'sans': ['Inter', ...defaultTheme.fontFamily.sans],
'serif': [...defaultTheme.fontFamily.serif],
'mono': [...defaultTheme.fontFamily.mono],
},
extend: {
colors: {
primary: '#911616',
},
},
container: {
center: true,
padding: '1rem',
},
},
variants: {
extend: {},
},
plugins: [
require('tailwindcss-fl')({
screenMin: 'screens.sm',
screenMax: 'screens.xl',
defaultRatio: 1.618,
}),
require('@tailwindcss/forms'),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/typography'),
],
};
Does anybody know where the issue is?
Regards,
Markus
