代码之家 › 专栏 › 技术社区 › Keisuke

我不能在ViewComponent中使用TailwindCSS

tailwind-css view ruby ruby-on-rails

0

Keisuke · 技术社区 · 2 年前

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

我想在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中的设置,但它不起作用。

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

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

0 回复 | 直到 2 年前

1

Mohd.Zafranudin 2 年前

我有这个在我的 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