New project with Tailwind, yarn build fails

[frankstallone]

I did a fresh install composer create-project roots/sage your-theme-name of sage today for the first time. I ran yarn && yarn build build immediately after it finished and it fails. If I goto that file in vscode and hover over tailwind I get this error, Unknown at rule @tailwindscss(unknownAtRules). What am I doing wrong?

Sage vesion: 9.0.10
Yarn version: 1.22.10
Node version: 15.6.0 (although I went back to 14 to try again and it’s the same failure)
Composer version: 2.0.8
PHP version: 7.3.24

   ERROR  Failed to compile with 2 errors                               7:39:27 PM

error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap? }
    at validate (/Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/schema-utils/dist/validate.js:104:11)
    at Object.loader (/Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/postcss-loader/dist/index.js:43:29)
    at /Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/webpack/lib/NormalModule.js:195:19
    at /Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/loader-runner/lib/LoaderRunner.js:233:18

@ multi ./scripts/main.js ./styles/main.scss

error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap? }
    at validate (/Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/schema-utils/dist/validate.js:104:11)
    at Object.loader (/Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/postcss-loader/dist/index.js:43:29)
    at /Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/webpack/lib/NormalModule.js:195:19
    at /Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/chromebook/pantheon/ashmore/wp-content/themes/ashmore/node_modules/loader-runner/lib/LoaderRunner.js:233:18

[joshb]

There are two very recent threads here that solve issues with Tailwind and Sage9.

Tailwind v2 and Sage 9

So this is an interference of the sage routing with browser sync?

Sage 9 browsersync not updating right

For @joshb: I completely got rid of webpack.config.preset.js, the only thing that you need there is the line config: path.join( __dirname, 'postcss.config.tailwind.js' ), // PostCSS tailwind specific config and I put it on the css rule because with autoprefixer and postcss-nested PostCSS plugins and the @apply Tailwind function I don’t need Sass anymore

I can confirm this fork for sage 9 with tw2 works flawlessly with Node 12:

ciromattia/sage

[frankstallone]

Thanks Josh – I did a search but didnt’ find anything conclusive. I’ll take a look at this in the AM and see if I can get it running. At a quick glance it seems like this is a bug with Sage’s create-project scripts. Not the best first experience with Sage. =)

[joshb]

Sage 9 doesn’t yet completely support tw2 but there are PRs awaiting…

You will need to git clone the repo branch:

git clone --branch 9-webpack5-tailwind2 git@github.com:ciromattia/sage.git theme_name
changing “theme_name” to your desired name

and update your devUrl and proxyUrl in config.json here:
theme/resources/assets/config.json

and proxyURL here:
assets/build/config.js

Then run from the root of the theme folder:
yarn && yarn build

Then run from the root of the theme folder:
composer install

That should get you up and running. This fork includes postcss-nesting so scss is not supported.

[SergiArias]

I wouldn’t use Sage 9 with Tailwind. I tried it and it was quite cumbersome, so I went the Sage 10 route and it was butter smooth with laravel mix. And really, Sage 10 isn’t released yet officially, but I find it better mantained than Sage 9 that was starting to have a lot of problems IMHO.

[frankstallone]

Thanks again @joshb for the direct way to get up and running in 9.

@SergiArias (or anyone), when running composer create-project roots/sage your-theme-name dev-master none of the CLI questions get asked, I assume the presents are not done. Has someone outlined how to move to Tailwind with dev-master after initializing a new theme? I’ll start by removing the bootstrap dep in package.json and installing tailwind and see what fails. Web dev at it’s finest!

Since I am new, anything would help as I am still getting used to the folder structures in Sage. All in all though, this is a heck of a lot better than WordPress theming of yesterday.

[frankstallone]

Quick follow up of steps I am following this morning…

1. Remove boostrap from package.json
2. Yarn install yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 via their docs but noting that autoprefixer is already there.
3. npx tailwindcss init
4. … read more documentation/threads here to see if I can find more steps. I will update this comment as I go.

… I imagine others have already gone through this setup so please feel free to share your experiences.

[ciromattia]

As already pointed out by @joshb I already gone through the whole steps, it took a bunch of days to get a working setup
If you want to bypass all the hassle you can clone my fork on branch 9-webpack5-tailwind2 and start from there (as said by @joshb), it’s the same result you’ll be getting with create-project.
If you want to use SCSS you only need to rename the CSS files to _filename.scss and update main.scss accordingly, webpack should already be ready for that (but as I pointed out SCSS is no more needed, at least for me).

[frankstallone]

@ciromattia My mistake, I thought that branch mentioned above was for Sage 9? I am looking to do this in Sage 10. I did find staged, and I see @Log1x recently added this PR I can follow… Part of me is holding my breath that this will be merged in within the next few days.

[SergiArias]

You are doing mostly the same that I do (the CLI doesn’t fire).

Just remember to edit this part in webpack.mix.js:

mix
  .sass('resources/assets/styles/app.scss', 'styles')
  .options({
    processCssUrls: false,
    postCss: [
      require('tailwindcss')('./tailwind.config.js'),
    ]
  })
  .sass('resources/assets/styles/editor.scss', 'styles')
  // .purgeCss({
  //   extend: { content: [path.join(__dirname, 'index.php')] },
  //   whitelist: require('purgecss-with-wordpress').whitelist,
  //   whitelistPatterns: require('purgecss-with-wordpress').whitelistPatterns,
  // })
  ;

It’s important that you remove purgeCss as tailwind has its own setup of it, and if you keep it like so, you won’t be able to ignore styles inside the scss files (quite useful for styles defined for menus or inside the wordpress database).

From there you just have to clean a little the scss files as they are customized with bootstrap.

I hope they ditch bootstrap soon too. It was the best framework for a long time, but now it just got old by the brilliant approach from Tailwind.

[ciromattia]

Sorry for misunderstanding, I didn’t get you were trying to setup it on Sage 10