我无法在ViewComponent中使用TailwindCSS

Question

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

我想在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'),
  ]
}

应用程序/组件/标题/component.html.erb

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

应用程序/组件/标题/组件.rb

# frozen_string_literal: true

class Footer::Component < ViewComponent::Base

end

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

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

视图文件已应用（图像中的顶部字符串）

如果不介意请告诉我。

Answer 1

我的

config/tailwind.config.js

里有这个

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

我还必须重新启动 Rails 应用程序才能使配置生效。

但是一定不要使用

rails server

使用

$ bin/dev

这将启动服务器和 TailwindCSS 观察器。

另一个需要检查的地方是您是否有来自以下教程或类似内容的预编译资源。一定要清理干净。

$ rails assets:clobber