I did the following;
yarn add tailwindcss --dev
Add imports to app.scss
/**
* This injects Tailwind's base styles, which is a combination of
* Normalize.css and some additional base styles.
*/
@tailwind base;
/**
* Import npm dependencies
*
* Prefix your imports with `~` to grab from node_modules/
* @see https://github.com/webpack-contrib/sass-loader#imports
*/
// @import "~some-node-module";
/**
* This injects any component classes registered by Tailwind plugins.
*/
@tailwind components;
/**
* This injects all of Tailwind's utility classes, generated based on your
* config file.
*/
@tailwind utilities;
Require tailwind in webpack.config.js
.options({
processCssUrls: false,
postCss: [
require('tailwindcss')('./tailwind.config.js'),
]
})
Add Tailwind config
npx tailwindcss init
And this results to this error when building;
ERROR in ./resources/assets/styles/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: getProcessedPlugins is not a function
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/processTailwindFeatures.js:75:83
at LazyResult.run (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:295:14)
at LazyResult.asyncTick (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:208:26)
at LazyResult.asyncTick (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:221:14)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:250:14
at new Promise (<anonymous>)
at LazyResult.async (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:246:23)
at LazyResult.then (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:127:17)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss-loader/src/index.js:142:8
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/webpack/lib/NormalModule.js:316:20
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss-loader/src/index.js:208:9
@ ./resources/assets/styles/app.scss
ERROR in ./resources/assets/styles/editor.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: getProcessedPlugins is not a function
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/processTailwindFeatures.js:75:83
at LazyResult.run (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:295:14)
at LazyResult.asyncTick (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:208:26)
at LazyResult.asyncTick (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:221:14)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:250:14
at new Promise (<anonymous>)
at LazyResult.async (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:246:23)
at LazyResult.then (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:127:17)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss-loader/src/index.js:142:8
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/webpack/lib/NormalModule.js:316:20
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss-loader/src/index.js:208:9
@ ./resources/assets/styles/editor.scss
ERROR in ./resources/assets/styles/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/sass-loader/dist/cjs.js??ref--5-4!./resources/assets/styles/app.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: [object Object] is not a PostCSS plugin
at Processor.normalize (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/processor.js:168:15)
at new Processor (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/processor.js:52:25)
at postcss (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/postcss.js:55:10)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/util/parseObjectStyles.js:24:33
at arrayMap (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/lodash/lodash.js:639:23)
at map (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/lodash/lodash.js:9580:14)
at Function.flatMap (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/lodash/lodash.js:9283:26)
at parseObjectStyles (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/util/parseObjectStyles.js:23:26)
at parseObjectStyles (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/util/parseObjectStyles.js:20:12)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/util/processPlugins.js:37:123
at arrayMap (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/lodash/lodash.js:639:23)
at map (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/lodash/lodash.js:9580:14)
at Function.flatMap (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/lodash/lodash.js:9283:26)
at parseStyles (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/util/processPlugins.js:37:26)
at addComponents (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/util/processPlugins.js:131:18)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/plugins/container.js:101:5
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/util/processPlugins.js:69:5
at Array.forEach (<anonymous>)
at _default (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/processTailwindFeatures.js:64:54
at LazyResult.run (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:295:14)
at LazyResult.asyncTick (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:208:26)
at LazyResult.asyncTick (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:221:14)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:250:14
at new Promise (<anonymous>)
at LazyResult.async (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:246:23)
at LazyResult.then (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:127:17)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss-loader/src/index.js:142:8
@ ./resources/assets/styles/app.scss 2:14-205
ERROR in ./resources/assets/styles/editor.scss (./node_modules/css-loader??ref--6-2!./node_modules/postcss-loader/src??postcss1!./node_modules/sass-loader/dist/cjs.js??ref--6-4!./resources/assets/styles/editor.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: getProcessedPlugins is not a function
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/tailwindcss/lib/processTailwindFeatures.js:75:83
at LazyResult.run (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:295:14)
at LazyResult.asyncTick (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:208:26)
at LazyResult.asyncTick (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:221:14)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:250:14
at new Promise (<anonymous>)
at LazyResult.async (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:246:23)
at LazyResult.then (/Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss/lib/lazy-result.js:127:17)
at /Volumes/Sites/**SITE**/wp-content/themes/**SITE**/node_modules/postcss-loader/src/index.js:142:8
@ ./resources/assets/styles/editor.scss 2:14-208
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "mix" exited with 2.
error Command failed with exit code 1.