Tailwind CSS Component Missing - also no more *.scss files?

I solved this problem, and wanted to share in case anyone else comes across it.

I was trying to get a TailwindCSS sticky footer going:

<div class="flex flex-col h-screen">
    <div class="bg-red-500">header</div>
    <div class="bg-green-500 grow">content</div>
    <div class="bg-blue-500">footer</div>
</div>

And the flex-row class didn’t seem to exist. At first I tried reinstalling Tailwinds with yarn install.

Then, this thread pointed me in the right direction.

I was trying to use the class in my index.php file, so I needed to add that file in the tailwind.config.js file:

module.exports = {
  content: [
      'index.php',
      './app/**/*.php',
      './resources/**/*.{php,vue,js}',
  ],
...

So that PurgeCss would actually load those parts of Tailwind, based on the presence of the classes in the codebase.

At risk of annoying mods with a second issue in the same thread, I don’t understand what’s happening with the change from scss to css files.

Does Sage no longer ship with Sass?

Thanks.

It does not. If you want to use Sass files w/ Bud, you’ll need to install the extension: https://www.npmjs.com/package/@roots/bud-sass There are also some posts in this forum about doing that.

Is bud handling the imports?

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

I built a site a few month back using v10 alpha which had full TailwindCSS support and now using latest Sage version and ran into same issue with missing import files and no scss files. Can you share any progression with your setup? I have installed both @roots/bud-tailwindcss @roots/bud-postcss.

I actually am not implementing SASS, so don’t have anything to report on there, but in terms of the imports–as noted above–you have to be sure that any Tailwind directives you utilize are included in the file system referenced in module.exports = { content: [...here.

I did see a post here recently suggesting that Sage isn’t designed that it would be updated within themes based on it, which would suggest that the site/theme you build with v10 alpha, you would just keep at that codebase.

I can’t speak with any authority on that, though. I’m not sure how to handle, in the long term, sites I’m still supporting that were built on top of Sage 9 with Gulp and Bower. At the moment, its Node Version Manager and living with security warnings and a large collection of global libraries on my drive.

Thanks for the reply. I decided not to go ahead with SASS implementation and haven’t had any issues as yet. Early days though ^-^