Tailwind v2 and Sage 9

@ciromattia @knowler Hmm. Those changes didn’t work for me. They didn’t seem to cause any other issues, so I left them and then looked at downgrading resolve-url-loader and file-loader to previous versions or before breaking changes as those seemed most likely to be responsible based on the error message I was still getting.

The one change that removed any errors was moving to file-loader@5.1.0, which allowed me to successfully compile, however despite having no errors and the styles being applied, I’m not actually seeing the font display. In other words, the styles are applied and the font file appears to have loaded, but there is no actual change in appearance to the text itself. See attached. This font should be bold and set to Raleway but instead still has the same Tailwind defaults I had been seeing previously.

Should look like

Hoping I’m not creating too big a mess here with version or dependency issues for these different packages. @ciromattia Your fonts were imported without error and on the front end they show up as expected?

This PR may fix the issue: https://github.com/roots/sage/pull/2603

1 Like

@strarsis Thanks, I bumped file-loader down to 4.3.0 corresponding to the version used in that PR and fonts and Tailwind are working as expected for me without any issue.

3 Likes

Working Sage 9, Webpack 5 and Tailwind 2.0.2 repo available here with updated theme installation instructions. Browsersync works again!

***IGNORE, there are issues

-The thread that lead to this. Thanks for all the help @strarsis

(switching from this thread)

After further investigation, RTFM and some mangling with webpack5 I got a completely working Sage 9 / TailwindCSS 2 / Webpack 5 / PostCSS 8 setup.
It’s a quite heavily customized sage install, so your mileage may vary, the main customizations are:

  • needs Node 10+ (webpack 5 requirement)
  • it’s TailwindCSS-tailored so if you want Bootstrap back you have to restore almost oll the styles and even jquery dependency
  • yeah, jquery is no more a dependency :wink:
  • it’s CSS-based so if you want to use SASS you have to rename the styles, though webpack config should support it out-of-the-box (but I made no tests); PostCSS manages imports, nesting and autoprefixing and TailwindCSS every other feature, so you should ask yourself if you really need SASS with an utility-first framework
  • uses webpack 5 new Assets Modules so file-loader and url-loader are gone for good

@joshb the watcher should be fully working, if you want to try it out.

The branch is 9-webpack5-tailwind2

1 Like

@ciromattia

I just setup your fork and at first I was still getting the reloading browsers looping thing… but it appears to have gone away for now:

[Browsersync] Reloading Browsers... (buffered 83 events)
[Browsersync] Reloading Browsers... (buffered 6 events)
[Browsersync] Reloading Browsers... (buffered 131 events)

Other than that, blade files are updating quickly and css files are injecting! Great news! It will be a little strange not running scss when needed but otherwise, this is nice. Thanks.

I’ll report back if I have issues with the browsersync loop thingymabobber.

I just got an issue with sage JS route mechanism not firing when watching, it’s an issue with the vanilla JS I changed in main.js so if your JS isn’t working change the last snippet in main.js with the following:

if (document.readyState !== 'loading') {
  routes.loadEvents();
} else {
  document.addEventListener('DOMContentLoaded', () => {
    routes.loadEvents();
  }, false);
}

Thank you! This is exactly what I was thinking of trying to build today, but this is so much better.

1 Like

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

@strarsis with JQuery everything works flawlessly probably the ready() function does something under the hood, but I was trying to get rid of jQuery.
I assume that browsersync for some reason doesn’t emit DOMDocumentLoaded event, so I tried with the “update” method and it works:

if (document.readyState !== 'loading') {
  routes.loadEvents();
}
1 Like

I am testing this starter but unfortunately there is a problem. During yarn build: production purgecss removes almost all styles. The yarn build command loads all, even unused, styles. Tested on node12 and node14. Can you help me?

Are you using Sage 9, the Sage 9.1 update branch or Sage 10?

Going further with development I had some issues with PurgeCSS as managed by webpack, so I switched to the Tailwind-integrated one.

On the latest versions in my branch you can see I commented everything about PurgeCSS in resources/assets/build/webpack.config.optimize.js and switched on the purge section in resources/assets/styles/tailwind.config.js.

Did you follow this configuration?

Yes. I download last repo, use composer , yarn and yarn build. I dont change anything.

I came across the same issue after I finished building the whole site and realized that I never tested production.
The error seems to be that the purge arguments are set relative to the tailwind config, while it should be relative to the root folder. I am not sure if this is only a Windows/WSL problem, though.
So this fixed it in tailwind.config.js:

purge: [
      './app/**/*.php',
      './resources/views/**/*.php',
      './resources/assets/scripts/**/*.js',
    ],
1 Like

Thanks, file-loader@5.1.0 worked for me!

but also had problems with font appearances - 4.3.0 worked

Has anyone gotten this to work with JIT mode?

It works for me when I build, but not when I use BrowserSync

There are still some issues with the __webpack_hmr error in the console when running yarn start:
Failed to load resource: the server responded with a status of 404 (Not Found)

But for the most part @strarsis’s repo (GitHub - strarsis/sage9-webpack5-tailwind: Sage 9 with webpack and tailwind) and @pi43r’s purge fix instructions (Tailwind v2 and Sage 9 - #43 by pi43r) combined did the trick for bringing up an old Sage 9 project with Tailwind up to date.

Thank you to everyone for posting their solutions, much appreciated!

Is this the same issue?

Those issues are very hard to track down. I already have tried to get it fixed.

Now the loaders have also changed, some were abandoned, some replace them.
A new branch is opened now that tries to use the latest packages (state 2021 end/2022):