Importing CSS with webpacker in Rails 6

Question

I use webpacker with Rails and am installing taildwindcss right now. Their installation guide says to use an @import method if I'm using postcss-import. I must say I get confused whenever I have to import CSS to Rails with webpacker, so I have a few questions:

1) The @import method from the docs - is it a JavaScript or CSS import method?

2) If it's a CSS method, why do I have to paste it inside javascript folder (e.g. javascript/stylesheets? I tried to put it inside the application.css file and it doesn't work. I assume it is somehow related to the fact that it's using PostCSS and package was installed via yarn?

3) If the above is true, does it mean that I have to import every CSS package that way if it's installed via yarn?

Answer 1

You will likely want to actually want to import into the CSS and javascript!

The typically setup will have app/javascript/styles/application.css for example which will bootstrap your global css:

@import "tailwindcss/base";

@import "tailwindcss/components";
@import "components/buttons"; // custom components that map to path app/javascript/styles/components/buttons.css for example

@import "tailwindcss/utilities";

In your app/javascript/packs/application.js you will import this:

// other js

import('styles/application.css');

// other js

In your layout you will add <%= stylesheet_pack_tag 'application' %> to add the css from application.js and <%= javascript_pack_tag 'application' %> to add the javascript from application.js.

The reason for this setup is that webpack is going to process application.js and it will handle the CSS and JS separately. Think of javascript/pack/application.js more of a bootstrap/dependencies file than a running javascript file. It's saying here's a list of stuff I need to work. In this case, one of the things is app/javascript/styles/xyz.css, and by the way, use post-css to manage how it is processed.