I'm running a rails app that is heavily using hotwire in some pages. All the CSS in the app is "written" using tailwindcss classes.
In some pages there are a lot of turbo broadcasts being sent by the server based on user interaction. One of the partials that is being sent is this
<div class="grid grid-cols-<%= question.answers.count %> gap-5">
...
</div
Assuming that the question has four answers, the class used in that div is grid-cols-4
, however, since this class isn't used on page load tailwind doesn't bundle it up with the css file sent over to the client. This means that when the broadcast is eventually loaded on the client side that class does not apply the style I would expect.
I confirmed that this is the case by adding a dummy div
element rendered on page load that is using this grid-cols-4
class and indeed the broadcasted partial is rendered the way I would expect it to render.
How can I make sure tailwind bundles up also the style that may be used in my broadcasted partials?
To add some context - this is what the broadcast looks like
broadcast_update_to "#{broadcast_id(school_class)}_teacher", target: "spark-container",
partial: "sparks/teacher/question_with_answers",
locals: {
spark: self,
question: question,
school_class: school_class
}
This is what my postcss.config.js
looks like
module.exports = {
plugins: [
require('tailwindcss')('./app/javascript/stylesheets/tailwind.config.js'),
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
And this is what my tailwind config looks like
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
purge: {
enabled: ["production", "staging"].includes(process.env.NODE_ENV),
content: [
'./app/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
],
},
theme: {
extend: {}
},
variants: {},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/aspect-ratio'),
],
}