样式提交按钮不起作用。 Rails + Devise + Tailwind

Question

我有一个带有 Rails + Devise + Tailwind 的应用程序。我有一个带有此提交按钮的表单：

<%= f.submit "Login", class: 'w-full text-white bg-blue-700 hover:bg-gray-500 font-bold rounded-lg text-sm px-5 py-2.5 text-center mt-5' %>

它工作得很好，如果我尝试更改字体大小，它可以工作，但如果我尝试将背景颜色更改为

bg-blue-300

或其他与

bg-blue-700

不同的颜色，它就会变得透明。

我尝试添加内联样式

style="color:red;"

并且它有效，但我们无法使用内联样式添加悬停背景颜色。

我可以在

plugin

内创建一个

tailwind.config.js

但这并不能解决为什么会发生这种情况。

谢谢

Answer 1

我刚刚解决了这个问题，但我不认为这是一个好的做法。

我从我的CSS文件中删除了

output.css

这种类型的按钮的默认值（提交），现在正在工作

从此：

button,
[type='button'],
[type='reset'],
[type='submit']{
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

对此：

button,
[type='button'],
[type='reset'] {
  -webkit-appearance: button;
  /* 1 */
  background-image: none;
  /* 2 */
}

Answer 2

这已经有一段时间了，但由于我遇到了同样的问题，我将在这里给出我的解决方案：

在某个时刻，我运行了

npm run build:css

，它将我的顺风样式编译为

app/assets/builds/application.css

并将其缩小。而这个文件在

layout/application.html.erb

中被调用：

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

这与我目前的风格相冲突。再次运行

assets:compile

解决问题。