我不能在ViewComponent中使用TailwindCSS

很高兴认识你,我是日本人。

我想在Rails7视图组件中应用TailwindCSS,但它不起作用。

我还更改了tailswind/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

enter image description here

我想在Rails7视图组件中应用TailwindCSS,但它不起作用。

我还更改了tailswind/config.js中的设置,但它不起作用。

视图文件已应用(图像中的顶部字符串)

如果你不介意,请告诉我。