Roots Discourse

Sage 10 with Tailwind 2.0.3

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 :)!

What are the errors you’re getting?

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.

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 :slight_smile:

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

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