How can I make Tailwind work on my component

Good morning everyone. I'm trying to render a FlashMessage component

 <% flash.each do |type, message| %>
                <%= render FlashMessageComponent.new(type: type, message: message) %>

            <% end %>

to the flash_message_component.html.erb:

<div class='relative flex px-4 py-3 space-x-2 border <%= color_classes(type) %>' role='alert'>
    <p class=""><%= message %></p>
</div>

from this class:

# frozen_string_literal: true


  class FlashMessageComponent < ViewComponent::Base

    attr_reader :type, :message
    def initialize(type:, message:)
      @type = type
      @message = message
      
    end

    
    def color_classes(type)

      case type

      
      when 'error'
        'bg-red-100 border-red-400 text-red-700'
     
      else
        'bg-gray-100 border-gray-400 text-gray-700'
      end

    end

  end

I'm getting the correct classes from the 'error' switch. However, I'm not getting the tailwind styling. What am I missing please.

I tried using the 'bg-red-100' class in one of the elements on the form, and it seems to be working just fine.

You need to add your components directory to tailwind config including .rb files:

// config/tailwind.config.js

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',

    './app/components/**/*.{erb,rb}'         // <=
...