ReactJS：Tailwind 覆盖全局 CSS 内联

Question

我有这个 Rails Reactjs 应用程序，如果我将此行放入表单中

<input type='submit'/>

它将为我创建一个蓝色按钮。我刚刚安装了 Tailwind，如果我用 tailwind 类输入这一行，它不会对按钮设计产生任何影响。

<input type='submit'
              className='bg-red-500  text-white font-bold py-2 px-4 rounded-full'/>

有没有一种方法可以覆盖此全局设置，例如将 !important 内联放入 className 中？

任何帮助将不胜感激。

Answer 1

您可以添加一个！类名之前的字符应该可以完成这项工作

例子：

<input type='submit'
             className='!bg-red-500  text-white font-bold py-2 px-4 rounded-full'/>

文档：https ://v2.tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier