New project with Tailwind, yarn build fails

frankstallone · January 20, 2021, 12:48am

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 · January 20, 2021, 1:45am

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

https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/64

I can confirm this fork for sage 9 with tw2 works flawlessly with Node 12:
https://github.com/ciromattia/sage/tree/9-webpack5-tailwind2

frankstallone · January 20, 2021, 2:20am

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 · January 20, 2021, 2:43am

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 · January 20, 2021, 9:04am

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 · January 20, 2021, 11:15am

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 · January 20, 2021, 11:49am

Quick follow up of steps I am following this morning…

Remove boostrap from package.json
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.
npx tailwindcss init
… 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 · January 21, 2021, 11:30am

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 · January 21, 2021, 12:28pm

@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 · January 21, 2021, 3:39pm

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 · January 21, 2021, 6:04pm

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