How to import relative css files?

[thomasvanholder]

The bundle:css command bundles the app/assets/stylesheets/application.tailwind.css file. How to include relative css files to be bundled too?

File structure

|-- stylesheets
  |-- application.tailwind.css  
  |-- custom.css   

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

@import "custom";  /* does not include the relative file.*/

[scotteknight]

I just had to figure this out too. In order to import any custom css files you have to use the postcss-import plugin with a postcss.config.js file as described here: https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

Once you set that up then your application.tailwind.css file can look like:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "./custom.css";

@import "tailwindcss/utilities";

where your custom.css file is included.

Then add the--postcss flag in your build:css script
Here is a blog post I also used for reference: https://dev.to/phawk/the-best-way-to-run-tailwind-css-on-rails-302c

I'm still not sure whether the other postcss plugins are required like I had when using in webpacker, e.g. flexbugs-fixes, preset-env etc. I basically kept my postcss.config.js file that same as before with webpacker but had to yarn add the required missing plugins to my package.json.

[scotteknight]

Just noticed this was referenced in issue #24 as well.

[dhh]

Documented the this question as part of the FAQ: 2a17da2.

[RomanKrasavtsev]

It should also be mentioned here that in order to use <%= stylesheet_link_tag "application", "custom" %> we have to specify //= link_tree ../stylesheets in app/assets/config/manifest.js. Correct me if I am wrong.

[dhh]

That's right. But also the default setup. So you'd have to have actively removed it not to see that. Or have you found another way it's missing?

[simon-bigsofa]

Had to add //= link_tree ../stylesheets to app/assets/config/manifest.js manually after a fresh install.

Looks like it's being removed from the default setup here during install:

cssbundling-rails/lib/install/install.rb

Line 9 in d920bc3

gsub_file "app/assets/config/manifest.js", "//= link_directory ../stylesheets .css\n", ""

[dhh]

Hmm, yeah, there's that conflict again where we're using the same directory for both styles that need compiling and those that do not. Need to figure a better solution for this.

[jmarsh24]

This is still an issue on new builds