Techioz Blog

ViewComponent で TailwindCSS を使用できません

概要

初めまして、私は日本人です。

Rails7のViewコンポーネントにTailwindCSSを適用したいのですが、うまくいきません。

tailswind/config.js の設定も変更しましたが、機能しません。

views ファイルが適用されました (画像の一番上の文字列)

差し支えなければ教えてください。

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

ここに画像の説明を入力してください

Rails7のViewコンポーネントにTailwindCSSを適用したいのですが、うまくいきません。

tailswind/config.js の設定も変更しましたが、機能しません。

views ファイルが適用されました (画像の一番上の文字列)

差し支えなければ教えてください。

解決策

これは私の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 サーバーは使用しないでください。

使用

$ bin/dev

これにより、サーバーと TailwindCSS ウォッチャーの両方が起動します。

もう 1 つの確認場所は、次のチュートリアルまたはソートからプリコンパイルされたアセットがあるかどうかです。必ず掃除してください。

$ rails assets:clobber