Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple CSS files for Tailwind apply directives #133

Closed
mathias234 opened this issue Jan 10, 2022 · 24 comments
Closed

Multiple CSS files for Tailwind apply directives #133

mathias234 opened this issue Jan 10, 2022 · 24 comments

Comments

@mathias234
Copy link

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
screenshot

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
Copy link
Contributor

dixpac commented Jan 10, 2022

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
Copy link
Author

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
Copy link
Member

dhh commented Jan 10, 2022

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.

@dhh dhh closed this as completed Jan 10, 2022
@mathias234
Copy link
Author

@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
Copy link
Member

dhh commented Jan 10, 2022

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
Copy link
Contributor

dixpac commented Jan 10, 2022

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
Copy link
Member

dhh commented Jan 10, 2022

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
Copy link
Author

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
Copy link
Contributor

dixpac commented Jan 10, 2022

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

@DanielJackson-Oslo
Copy link

+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
Copy link
Member

dhh commented Jan 10, 2022

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
Copy link

DanielJackson-Oslo commented Jan 10, 2022

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
Copy link
Member

dhh commented Jan 10, 2022

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

@AhmedNadar
Copy link

AhmedNadar commented Jan 19, 2022

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.

@loqimean
Copy link

loqimean commented Feb 17, 2022

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 screenshot

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

Hey man, I have this one solution for me, just create rake task lib/tasks/csspacker.rake with the next code:

# frozen_string_literal: true

desc "Packs all CSS files from app/assets/tailwind_stylesheets into app/assets/application.tailwind.css
      then runs the tailwind build"
task pack_css: :environment do
  files = Dir["./app/assets/tailwind_stylesheets/**/*.css"]

  File.open("./app/assets/stylesheets/application.tailwind.css", "w") do |main_file|
    main_file.write("/* GENERATED FILE! */\n")
    main_file.write("@tailwind base;\n")
    main_file.write("@tailwind components;\n")
    main_file.write("@tailwind utilities;\n")
    main_file.write("\n")

    files.each do |file_path|
      File.open(file_path, "r") do |file|
        loop do
          main_file.write(file.readline)
        rescue StandardError
          main_file.write("\n")
          break
        end
      end
    end
  end
end

Rake::Task['tailwindcss:build'].enhance [:pack_css]

desc "Run tailwind:build on changes in directory app/assets/tailwind_stylesheets"

task 'pack_css:watch' do
  listen = Listen.to(Rails.root.join('app', 'assets', 'tailwind_stylesheets')) do
    Rake::Task[:pack_css].execute
    Rake::Task['tailwindcss:build'].execute
  end

  listen.start
end

Rake::Task['tailwindcss:watch'].enhance ['pack_css:watch']

Then just create your 'tailwind components' in a directory app/assets/tailwind_stylesheets

@dhh hi, what you can say about this solution?

@fagiani
Copy link

fagiani commented Mar 27, 2023

@loqimean thanks for providing an alternative.

A couple things that I've noticed:

  • it requires gem "listen", "~> 3.8" in order to work
  • it will replace the original application.tailwind.css causing it to become the same as if there were no separate files and duplicating code as you commit it.

Keep rocking!

@loqimean
Copy link

@loqimean thanks for providing an alternative.

A couple things that I've noticed:

  • it requires gem "listen", "~> 3.8" in order to work
  • it will replace the original application.tailwind.css causing it to become the same as if there were no separate files and duplicating code as you commit it.

Keep rocking!

So, what about now, TailwindCSS allows to do it in its new version without any additional things

@fagiani
Copy link

fagiani commented Mar 27, 2023

So, what about now, TailwindCSS allows to do it in its new version without any additional things

Would you mind sharing a bit more about that? I'd really appreciate as I've just created a new rails project and was unable to figure that out.

Thanks a bunch!

@loqimean
Copy link

So, what about now, TailwindCSS allows to do it in its new version without any additional things

Would you mind sharing a bit more about that? I'd really appreciate as I've just created a new rails project and was unable to figure that out.

Thanks a bunch!

Sure, this

@fagiani
Copy link

fagiani commented Mar 27, 2023

@loqimean thanks for pointing that out.

I've checked I had latest tailwind version and tried that approach both with @import and @tailwind and none worked... it will actually import those into application.css with all @apply within it thus not parsing at all.

Please let me know if you have had any further progress with it.

I really appreciate your help here.

@brunoprietog
Copy link

With the latest version of the gem, I have something like this and it works

In app/assets/stylesheets/application.tailwind.css:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./buttons.css";

/* You can put css here too */

Then in app/assets/stylesheets/buttons.css:

@layer components {
  .btn {
    @apply px-6 py-4;
    @apply rounded-lg shadow-xl;
    @apply hover:cursor-pointer;
  }
}

@fagiani
Copy link

fagiani commented Mar 27, 2023

With the latest version of the gem, I have something like this and it works

@brunoprietog Thanks a lot for taking the time to help along.

I've created a brand new project with the same code you pasted above and it is publicly available here

Somehow it will get a bit messed up as it will get both versions conflicting.

There is a /posts scaffold just to test the CSS but when trying to inspect this is what i get:

Screenshot 2023-03-27 at 5 32 47 PM

Screenshot 2023-03-27 at 6 01 44 PM

Screenshot 2023-03-27 at 5 44 30 PM

Screenshot 2023-03-27 at 5 46 05 PM

BTW, I've also tried with the defaults with no luck as well:

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "./buttons.css"

I must be missing some obvious detail here.

I'd sincerely appreciate any insights!

@brunoprietog
Copy link

Tailwind requires a watcher that rebuilds the CSS when files change. So, you have to run bin/rails s in one terminal and bin/rails tailwindcss:watch in another. The generator includes a bin/dev file, which Foreman uses to run multiple processes in a single terminal window. These processes are defined in the procfile.dev file. So, you have 2 options: Run the commands separately, or run bin/dev.

Also, if you are going to follow this approach, I recommend you to use Propshaft instead of Sprockets, you can do it by passing the -a propshaft option to the rails new generator, like this: rails new myapp --css tailwind -a propshaft.

Let me know if it works

@fagiani
Copy link

fagiani commented Mar 27, 2023

@brunoprietog I was already using bin/dev. Replacing Sprockets with Propshaft did the trick.

Thanks again!

waiting-for-dev added a commit to solidusio/solidus that referenced this issue May 12, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
waiting-for-dev added a commit to solidusio/solidus that referenced this issue May 12, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
waiting-for-dev added a commit to solidusio/solidus that referenced this issue May 23, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
waiting-for-dev added a commit to solidusio/solidus that referenced this issue May 23, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
waiting-for-dev added a commit to solidusio/solidus that referenced this issue May 29, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
waiting-for-dev added a commit to solidusio/solidus that referenced this issue May 30, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Jun 9, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Jun 9, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Jun 19, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Jul 11, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Aug 2, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
waiting-for-dev added a commit to solidusio/solidus that referenced this issue Aug 8, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
waiting-for-dev added a commit to solidusio/solidus that referenced this issue Aug 9, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Sep 25, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Sep 27, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Sep 28, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Sep 29, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
elia pushed a commit to solidusio/solidus that referenced this issue Oct 6, 2023
In a similar way we were doing for the tailwind configuration file, we're
now allowing the host app and extensions to add their own Tailwind CSS.

This is done by changing the `application.tailwind.css` file to an ERB
template. Both the host application and extensions can add their own
stylesheets through the `tailwind_stylesheets` configuration option. During
compilation time, the content for those `tailwind_stylesheets` is appended to
the dynamically generated CSS file.

As adding new styles should be thoroughly thought as per tailwind recomendations,
we're not creating a default stylesheet for the host app and, instead, it needs
to be manually created.

The way we're doing this can be seen as a bit clumsy, but the alternative
requires using `postcss-import` and adding all the npm jazz to the mix. There have
been some discussion on tailwindcss-rails about this [2], but there's no built-in way as of
today.

[1] - https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
[2] - rails/tailwindcss-rails#133
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants