Rails7 View Component中TailwindCSS无法生效的问题求助

我是日本人，在Rails7的View Component中尝试应用TailwindCSS，但样式无法生效。已修改tailwind/config.js配置，但问题仍未解决。views文件中的样式已正常生效（如图中顶部文字所示），以下是相关配置与代码文件，恳请帮忙排查：

tailwind/config.js配置 #

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './app/components/**/*'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Noto Sans JP', ...defaultTheme.fontFamily.sans],
        cabin: ['Cabin Sketch', ...defaultTheme.fontFamily.sans],
      },
      width: {
        '50': '12.5rem',
        '88.5': '22.125rem',
        '100': '25rem',
        '160': '40rem',
      },
      aspectRatio: {
        '4/3': '4 / 3',
        '1.91/1': '1.91 / 1',
        '3/1': '3 / 1',
        '4/1': '4 / 1',
        'video': '16 / 9',
      },
      maxWidth: {
        '100': '25rem',
      }
    },
  },
  variants: {
    backgroundColor: ['responsive', 'odd', 'hover', 'focus'],
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
  ]
}

app/components/header/component.html.erb代码 #

<div class="text-red-500">Add Footer template here</div>

app/components/header/component.rb代码 #

# frozen_string_literal: true

class Footer::Component < ViewComponent::Base

end

排查解决建议 #

• 修正组件路径与类名匹配：你的组件目录是app/components/header/，但类名是Footer::Component，建议将目录改为app/components/footer/，确保结构和命名一致，避免Tailwind扫描遗漏。
• 明确组件文件扩展名：将tailwind/config.js中content里的./app/components/**/*改为./app/components/**/*.{erb,rb}，确保Tailwind能识别组件的模板和Ruby文件。
• 重启构建进程：修改Tailwind配置后，重启bin/dev这类构建进程，让新配置生效并重新扫描所有文件。
• 检查组件渲染代码：确认视图中是用<%= render Footer::Component.new %>正确渲染组件，路径错误会导致组件未加载。
• 验证样式生成：在组件模板中添加一个唯一类名（如test-custom-class），编译CSS后搜索该类名，若不存在说明Tailwind未扫描到该组件文件，需调整content配置。

内容的提问来源于stack exchange，提问作者Keisuke