Colours not being applied as they should in Rails 7.0.8 and Ruby 3.2.2

[RickHPotter]

For some reason, I can copy the whole html that gets rendered in the browser and place it in the Tailwind Playground, and it gets rendered exactly as it should, but by running it on rails the colours are set to default.

Steps to reproduce

You can either use my repo for parameter. This commit or you can try using ruby 3.2.2, install rails version 7.0.8 using the flag -c=tailwind and setting up ViewComponent (or maybe no need for that. I tried rendering a simpe div with class bg-black and text-pink-500 and it didnt work.

text-red-500 and 600 work, which lead me to think only some colours work like this answer has proposed, but this was 2021 and nowadays the documentation lists pretty much all the colours with all the number variations.

I'm running my server using bin/dev, in a WSL (I have also tried on Ubuntu, but same result). My tailwind config is pretty much default.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/components/**/*.rb',
    './app/components/**/*.html.erb',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

Context of where the problem occurs more: the ring-colour in my textFieldComponent. Yes, i tried using it hardcoded just to test, to no avail, and the hover:bg-color in the ul->li in my AutocompleteSelectComponent View.

[RickHPotter]

I solved it.

The reason is pretty simple although I'm not exactly aware of how this works. I believe there are two things happening at the same time. Rails dinamically assigns variables to completion before HTML is deployed so that normal CSS can work out of the box, and Tailwind Compiler (is it a compiler?) grabs the classes as they are and bring forwards the css styles, but not before waiting for Rails to assign the dynamic Frankenstein classes.

<label class="... start-1 peer-focus:text-<%= colour %>-500 peer-focus:top-2 ..." >

should be

<label class="... start-1 peer-<%= 'focus:text-pink-500' if colour == 'pink' %> peer-focus:top-2 ..." >

This colour is going to work with HTML and Rails, but not with Tailwind.

I decided to just have, at most, two colours for everything by creating a Dark Mode for my app and now everything is working.