# New project with Tailwind, yarn build fails **URL:** https://discourse.roots.io/t/new-project-with-tailwind-yarn-build-fails/19929 **Category:** sage **Tags:** webpack, sage9, sage10 **Created:** 2021-01-20T00:48:12Z **Posts:** 11 ## Post 1 by @frankstallone — 2021-01-20T00:48:12Z 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 ``` ![Screen Shot 2021-01-19 at 8.25.55 PM](https://discourse.roots.io/uploads/default/original/2X/e/e4c21cef3907641c5f3e5acd1c6b9e9c14f28c37.png) ![Screen Shot 2021-01-19 at 8.26.38 PM](https://discourse.roots.io/uploads/default/original/2X/f/f27ddb2947672a87c96cb98390c0e38db7f357e3.png) --- ## Post 2 by @joshb — 2021-01-20T01:45:05Z There are two very recent threads here that solve issues with Tailwind and Sage9. > [@Tailwind v2 and Sage 9](https://discourse.roots.io/t/tailwind-v2-and-sage-9/19598/37): > > So this is an interference of the sage routing with browser sync? [https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/64](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](https://github.com/ciromattia/sage/tree/9-webpack5-tailwind2) --- ## Post 3 by @frankstallone — 2021-01-20T02:20:21Z 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. =) --- ## Post 4 by @joshb — 2021-01-20T02:43:09Z 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. --- ## Post 5 by @SergiArias — 2021-01-20T09:04:31Z 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. --- ## Post 6 by @frankstallone — 2021-01-20T11:15:14Z 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. :innocent: --- ## Post 7 by @frankstallone — 2021-01-20T11:49:52Z 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](https://tailwindcss.com/docs/guides/laravel) 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. :smiley: --- ## Post 8 by @ciromattia — 2021-01-21T11:30:12Z As already pointed out by @joshb I already gone through the whole steps, it took a bunch of days to get a working setup :slight_smile: 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](https://discourse.roots.io/t/new-project-with-tailwind-yarn-build-fails/19929/4)), 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). --- ## Post 9 by @frankstallone — 2021-01-21T12:28:35Z @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](https://github.com/ouun/stage), and I see @Log1x [recently added this PR I can follow](https://github.com/roots/sage/pull/2611)… Part of me is holding my breath that this will be merged in within the next few days. --- ## Post 10 by @SergiArias — 2021-01-21T15:39:04Z 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. --- ## Post 11 by @ciromattia — 2021-01-21T18:04:20Z Sorry for misunderstanding, I didn’t get you were trying to setup it on Sage 10 :slight_smile: