Support Tailwind's theme() function in asset pipeline CSS files

[pas256]

TailwindCSS has this neat function called theme() which lets you do things like

.btn-blue {
  background-color: theme(colors.blue.500);
}

but it doesn't seem to work with this gem. I've tried the above in app/assets/stylesheets/application.css but no dice. I suspect it is because of Sprokets or the asset pipeline in some way, but am far from an expert at it. I'm using a Rails 7.1.

[flavorjones]

@pas256 You need to put this CSS snippet in your app/assets/stylesheets/application.tailwind.css file.

[pas256]

Hmmm, I must be doing something wrong because that doesn't work for me. In my application.tailwind.css I have:

.ag-theme-quartz-dark {
  --ag-data-color: theme(colors.red.800);
  /* --ag-data-color: #ff0000; */
}

The top line never seems to evaluate to a color, but hard coding #ff0000 works. Do you have any idea why that might be? Does it not work for CSS variables for some reason?

[flavorjones]

@pas256 What works for me is:

/* in application.tailwind.css */
.btn-blue {
  background-color: theme(colors.blue.500);
}

I'm not very familiar with CSS variables, but I do know there are constraints on the values they can be set to. You may want to ask this question in a tailwind-specific forum.

[pas256]

I figured it out. I was doing something wrong. 😱

In views/layouts/application.html.erb I had to make the order of stylesheet includes have tailwind last.

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

(at some point, tailwind was loading before application). I think what was happening is that the last CSS definition wins, so the vendored versions of agGrid (which get included in application) were being loaded last, overwriting the definition. Being able to look at app/assets/builds/tailwind.css confirmed the theme function was working correctly, so I knew it had to be something else.

Thanks for pointing me in the right direction!