10

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?

sloneorzeszki
  • 1,274
  • 3
  • 12
  • 22

1 Answers1

16

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.

Jonathan Bennett
  • 1,055
  • 7
  • 14
  • Thanks. Do you know why this approach (adding @import) doesn't work if we just use sprockets for it? Also, this renders sprockets pretty much useless (other than images), there's no point in keeping CSS in two separate locations. – sloneorzeszki Sep 02 '19 at 06:54
  • 1
    If you were to `//= require 'tailwinds/base';` etc in your Sprockets application.css it would essentially try to copy/paste the contents of tailwind inline. Sprockets is not aware of all the custom code that makes up the Tailwind framework, so you wouldn't get the actual working css. Sprockets is still useful if you are doing basic css or using built in stuff. Since web packer is built in with Rails 6 I expect Sprockets will be less and less used. – Jonathan Bennett Sep 02 '19 at 14:00
  • Thanks a lot. What do you mean by "all the custom code"? Isn't the code in tailwindcss/base just CSS, why would it not work? – sloneorzeszki Sep 02 '19 at 19:02
  • No, Tailwind is an entire system. It has configuration, options, plugins etc. That’s why it uses post-css or webpacker. You can see more if you look at the tailwind docs for config: https://tailwindcss.com/docs/configuration/ – Jonathan Bennett Sep 02 '19 at 19:17
  • Ohh, this makes so much more sense. Thank you. – sloneorzeszki Sep 03 '19 at 06:12
  • 1
    Instead of using `import('styles/application.css');` in `javascripts/packs/application.js`, I had to use `require("styles/application.css") to make it work. By the way, all the other generated statements also use `require` directive (like `require("@rails/ujs").start()`, etc...). – belgoros Mar 02 '20 at 14:15
  • This answer should be the authoritative 'how to' guide for using webpacker for css. – stevec Feb 07 '22 at 02:59