2

I'm working on a Rails 7 project where I use ViewComponents and Tailwindcss. I'm having some problem getting changes in component's .html.erb files to update properly.

When I run ./bin/dev and make css-changes or additions inside app/components/<module-name>/<file-name.html.erb the added css class doesn't get compiled / rendered.

If I would add the same class in any of my app/views html.erb the correct styling is applied.

I have tried to update config/tailwind.config.js to include:

content: [
  ...
  './app/views/**/*',
  './app/components/**/*'

But every time I re-run .bin/dev the css-classes that only exists inside app/components won't show.

Any ideas on how I can fix this?

Anders
  • 2,903
  • 7
  • 58
  • 114
  • 1
    when you changed css on component views, is there css task `Rebuilding...` on your console ? any error ? and how you set the css classes, notice that `<%= css classes ... %>` could not work. – Lam Phan Aug 03 '22 at 07:34
  • @LamPhan Thanks for your comment. Seems like you are correct about `<%= css classes ... %>`. If I add the classes directly, ex: `class="sm:col-span-4` it works, but if I have `class="<%= @col_span_classes %>` it doesn't. Any ideas why that is? – Anders Aug 03 '22 at 15:36
  • 1
    @LamPhan Found the problem here: https://github.com/rails/tailwindcss-rails/blob/main/README.md#class-names-must-be-spelled-out, and from this issue: https://github.com/rails/tailwindcss-rails/issues/127. Had a case where I constructed the class name like this: `class="sm:col-span-<%= @col_span %>"`. That didn't work since the classes needed to be spelled out. If I change the attribute value to be the full class name it worked, so `class="<%= @col_span_classes %>"` worked. – Anders Aug 03 '22 at 16:04

1 Answers1

3

I'm working with

gem 'view_component'

Based on what you did, I also updated my config/tailwind.config.js with the following and it worked for me with the following code:

content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './app/components/**/*.{erb,haml,html,slim}' // I Add this line
 ],
Harold Mideros
  • 51
  • 2
  • For my components I'm dynamically updating the tailwind classes applied in my component ruby files. Therefore I need to add `rb` to `./app/components` entry as follows: `'./app/components/**/*.{rb,erb,haml,html,slim}' // rb has been added ` – Richard Logwood Aug 15 '23 at 03:17