Sage 10 with Tailwind 2.0.3

Tailwinder · February 13, 2021, 3:41pm

I’m trying to get Sage 10 working with the lastest version of Tailwind but I’m having some trouble to get it working. I’ve tried several solutions, like adding ‘mix-tailwindcss’ or editting my webpack.mix.js file with adjustments found on this forum. But I still keep getting errors, now I must admit I’m kinda new to webpack. I find it hard to add Tailwind and add purging/autoprefixer to my default sage 10 project.

Has anyone a guide for me how to get Tailwind working with Sage10? I’ll be grateful for any suggestion :)!

alwaysblank · February 13, 2021, 3:49pm

What are the errors you’re getting?

Tailwinder · February 13, 2021, 6:03pm

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.

Tailwinder · February 13, 2021, 6:26pm

I fixed it with

% yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

But building time increased alot, and when I use yarn build:production all classes get deleted in the stylesheet except the reset ones. Any help would be awesome

alwaysblank · February 13, 2021, 7:02pm

Check your tailwind purgecss settings if you’re using tailwind 2: https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css

Also check (or disable) Sage’s purgecss: https://github.com/roots/sage/blob/33005e59b45ebf6139c07ec6b5751417a1d24dda/webpack.mix.js#L24-L28

theMosaad · February 13, 2021, 9:58pm

You might wanna try this branch that’s getting merged soon. It had 2.5x faster building time for me and comes equipped with everything you need.
git clone --branch log1x/next https://github.com/roots/sage.git your-theme-name