In a Rails application, I use TailwindCSS to style via the tailwindcss-rails
gem.
In a view, I have the following piece of code, which is correctly styled.
<div class="flex pb-3 gap-3 items-end">
<div class="w-1/3">A</div>
<div class="w-1/3">B</div>
<div class="w-1/3 flex justify-end">C</div>
</div>
I updated it as below.
<div class="flex pb-3 gap-3 items-end">
<div class="w-2/5">A</div>
<div class="w-2/5">B</div>
<div class="w-1/5 flex justify-end">C</div>
</div>
However, the w-1/5
and w-2/5
classes are not added to the generated CSS file.
The only notable thing is that the w-1/3
class is also used on other views and introduced when using tailwindcss-rails
3.3 (and Tailwind 3.4). While the two missing classes are introduced with tailwindcss-rails
3.4 (and Tailwind 4).
Am I missing something regarding Tailwind 4 preventing the classes from being added?
My configuration looks like
config/tailwind.config.js
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/assets/images/*.svg',
'./app/views/**/*.{erb,html}'
],
}
app/assets/stylesheets/tailwind/application.css
@import 'tailwindcss';
@config '../../../config/tailwind.config.js';
@plugin "@tailwindcss/aspect-ratio";
@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
Gemfile.lock
tailwindcss-rails (4.0.0)
railties (>= 7.0.0)
tailwindcss-ruby (~> 4.0)
tailwindcss-ruby (4.0.3)
tailwindcss-ruby (4.0.3-aarch64-linux-gnu)
tailwindcss-ruby (4.0.3-arm64-darwin)
tailwindcss-ruby (4.0.3-x86_64-darwin)
tailwindcss-ruby (4.0.3-x86_64-linux-gnu)