Class detection in Ruby Template files

[grekko-headacy]

What version of Tailwind CSS are you using?

v3.3.3

What build tool (or framework if it abstracts the build tool) are you using?

Using vite with v4.4.12

What version of Node.js are you using?

v21.5.0

Reproduction URL

n/a – I can add a repo later for debugging help.

Describe your issue

We are using ViewComponent to manage our HTML templates.

With a ruby template like this:

class FooComponent < ApplicationComponent
  def call = tag.span "Foo", class: %w[rounded-full h-0.75 w-0.75]
end

The generated Tailwind styles include rounded-full, h-0.75 but not the w-0.75-class.

When re-arranging the css classes like so:

class FooComponent < ApplicationComponent
  def call = tag.span "Foo", class: %w[rounded-full w-0.75 h-0.75]
end

The generated Tailwind styles include include rounded-full, w-0.75 but not the h-0.75-class.

When re-arranging the css classes like so:

class FooComponent < ApplicationComponent
  def call = tag.span "Foo", class: %w[w-0.75 h-0.75 rounded-full]
end

The generated Tailwind styles includes all expected classes (rounded-full, h-0.75 and w-0.75).

[cris458carlo]

Hello, You are experiencing an issue with Tailwind CSS class generation when using ViewComponent with Vite. This might be related to how Tailwind’s JIT (Just-In-Time) mode processes your classes.

Here are a few things you can try to resolve this issue:

Ensure Tailwind is scanning all your files: Make sure your tailwind.config.js file includes all the paths where your classes might be used. For example: module.exports = { content: [ './app//*.html.erb', './app/helpers/*/.rb', './app/javascript//*.js', './app/views/*/.{html,html.erb}', './app/components/*/.{rb,html.erb}', ], theme: { extend: {}, }, plugins: [], } Safelist the classes: If certain classes are not being picked up, you can safelist them in your tailwind.config.js: module.exports = { safelist: [ 'rounded-full', 'h-0.75', 'w-0.75', ], // other configurations } Check for dynamic class names: If you’re using dynamic class names, Tailwind might not be able to detect them. Ensure that all class names are static or use the safelist feature. Update Vite and Tailwind: Ensure you’re using the latest versions of Vite and Tailwind CSS. Sometimes, bugs are fixed in newer releases. Restart the development server: Sometimes, changes in configuration files lhi provider require a restart of the development server to take effect.

Hope that helps.

[cris458carlo]

Hello, You have check Asset Path Configuration ensure that the asset path is correctly configured in your Nuxt.js project. Sometimes, the issue might be related to how the paths are resolved during the build process.

[joeldrapper]

I’m also having this problem with Phlex components, which are .rb files.