Multiple CSS files for Tailwind apply directives

[mathias234]

Hey!

We have used tailwind for some time in our project and are now attempting to upgrade to Rails 7 with importmaps and this gem instead of Node.
We seem to have stumbled upon a problem with how we arranged our CSS files as we had split them over multiple files and done @import in our application.css file. If we do that with this gem we just get these errors

The CSS will start working again if we merge all into the application.tailwind.css but that results in a large and unwieldy file. So the main question is: Is there a way to have multiple CSS files that are compiled by tailwind without using Node

[dixpac]

From my research on this, at the moment there is not, since there is no postcss plugin.
Also I'm not sure if this is tailwindcss-rails or tailwind standalone cli build issue.

But, I may be wrong on this one, i didn't spend a lot of time researching this issue.

[mathias234]

From my research on this, at the moment there is not, since there is no postcss plugin. Also I'm not sure if this is tailwindcss-rails or tailwind standalone cli build issue.

But, I may be wrong on this one, i didn't spend a lot of time researching this issue.

I don't think it's really an issue/bug from either this gem or the CLI tool, it's just not a feature. Tailwind CLI only seem to accept one file to it and does not have functionality to include other files, as far as I understand

[dhh]

If you're using HTTP2, no substantial benefit for bundling CSS into a single file. You can refer to multiple files just fine. Either way, it's indeed not a feature of this standalone TW setup.

[mathias234]

@dhh The point was not to have bundling, but my understanding is tailwind needs to "build" each CSS file and there seem to be no way to make this happen. So if I just link to the CSS file the @apply directives will not be resolved and i get the errors you see in the screenshots

[dhh]

I don't think I follow? Is it that you're using @apply in multiple files? If so, I'd just stop doing that 😄. As I understand it, @apply is meant to be a sparse, rare usage. If you're doing it so much you need multiple files to contain it all, I think it's worth considering if Tailwind is the right fit.

[dixpac]

I don't think it's really an issue/bug from either this gem or the CLI tool, it's just not a feature. Tailwind CLI only seem to accept one file to it and does not have functionality to include other files, as far as I understand

👍🏼

@dhh issue here is that it is "common" practice to separate components into different files

styleshhets/
  components/
   button.css
   card.css
 application.css

And then include those components using @import inside the application.css

But, with standalone CLI that is not possible since there is no postcss

[dhh]

I think such a setup sorta defeats the purpose of Tailwind, to be honest. Their tag line is literally "Rapidly build modern websites without ever leaving your HTML". Anyway, it is what it is, if you're using the standalone version of Tailwind. If you must have postcss, then you'll need the whole Node enchilada.

[mathias234]

I agree that we may be overusing the @apply after from reading closer in tailwind's docs it's definitely not the recommended way

[dixpac]

We made the same "mistake" in the past @mathias234 , it takes a time to adjust after BEM or similar stuff 😅

[DanielJackson-Oslo]

+1 to this. I would love to be able to keep my railsy CSS structure with several small CSS files in stylesheets, while still being able to sprinkle a little heretical @apply in them when needed.

I guess just a tiny ruby pre-compiler that watches and simply merges all css files in /stylesheets/ before handing them over to tailwind would do the trick without node and in very few lines of code? @mathias234 wrote a hack to that effect here: https://github.com/lnu-norge/lokaler.lnu.no/blob/c13668de1aaa723a1432b87db46a0b12d146c96b/lib/tasks/css_packer.rake

I think such a setup sorta defeats the purpose of Tailwind, to be honest. Their tag line is literally "Rapidly build modern websites without ever leaving your HTML". Anyway, it is what it is, if you're using the standalone version of Tailwind. If you must have postcss, then you'll need the whole Node enchilada.

To me Tailwind has become both a way to rapidly build without leaving my HTML, but also a design system that adds consistency. When Tailwind can't keep up with all my CSS needs, I end up using a few CSS files as well - usually split into several small files to try to keep them from getting too messy - and then I use @apply to get that sweet consistency of colours, margins, and more.

Typical use cases where I feel tailwind-in-html falls short and I find myself reaching for @apply:

1. Styling third party HTML with set classes (impossible with tailwind)
2. Styling standard content typography (p, a, h1, etc. (feels impractical to make custom view_components or whatever for all of them)
3. "Combined utility classes" for combinations of utility classes I repeat on several different components and would want to change one place to change them all

Genuinely looking to learn here: Is using @apply wrong for these cases? It feels natural to keep tailwind-in-html as far as it can take me, but then eject to CSS for these cases - and I don't think we have over-done it?

For number 1 I don't see any other way to do it - but I guess the other two could be mostly achieved by creating composable components, but I guess that would require view_components too? Or could I do it efficiently and nicely with vanilla rails?

[dhh]

I'm not so much rendering an opinion on right or wrong, as much as just parroting what the TW guidelines are. As well as of course just noting the inherent constraints we have using the standalone TW compiler. Ultimately, you should write CSS the way that feels right for your app! And that may well be "I need Node, because I want PostCSS and other stuff" ✌️

[DanielJackson-Oslo]

Thanks for the response!

"I need Node, because I want PostCSS and other stuff"

Would you be open to a PR that allows for a tiny pre-compile step that simply combines all css files in /stylesheets/ into one file, that is then passed to tailwind? Written with pure ruby code and without ever needing Node, of course.

Not unlike what @mathias234 hacked together here: https://github.com/lnu-norge/lokaler.lnu.no/blob/c13668de1aaa723a1432b87db46a0b12d146c96b/lib/tasks/css_packer.rake

[dhh]

I think having a small precompiler live in a gem which we can point to from the README makes sense to me 👍

[AhmedNadar]

I was able to find away or a solution.
Within application.tailwind.css I wrapped my custom classes which includes @apply with@layer components {}.
As it mentioned in TailwindCSS docs.

The components layer is also a good place to put custom styles for any third-party components you’re using:

Example...

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .auth {
        @apply relative;
        --tw-bg-opacity: 1;
        background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    }
    .auth:before {
        content: "";
        margin-left: -48%;
        background-image: url("assets/bg-login.svg");
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .auth_container {
        @apply container mx-auto;
    }
    .auth_grid {
        @apply block grid-cols-2 gap-4;
    }
}

It works for me and hope it helps.