如何在Rails7+Tailwind CSS项目中修复Action Text样式异常

核心原因 #

你遇到的问题是样式加载顺序导致优先级冲突：当前Action Text的样式在Tailwind CSS之前加载，而Tailwind的基础重置样式（如列表、图片的默认规则）优先级更高，直接覆盖了Action Text的默认样式。

具体修复步骤 #

1. 移除重复的样式导入 #

打开app/assets/stylesheets/application.tailwind.css，删除末尾的@import 'actiontext.css';，避免重复加载样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

2. 调整样式加载顺序 #

修改app/views/layouts/application.html.erb中的stylesheet_link_tag顺序，让Action Text的样式在Tailwind主样式之后加载，确保优先级更高：

<%# 先加载Tailwind主样式 %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%# 再加载Action Text样式 %>
<%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>

3. 可选：强制锁定Action Text关键样式 #

如果仍有个别样式被覆盖，可在application.tailwind.css的@tailwind utilities之后添加自定义规则，强制指定.trix-content下元素的样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

.trix-content ul {
  list-style-type: disc !important;
  margin-left: 1.5rem !important;
}

.trix-content ol {
  list-style-type: decimal !important;
  margin-left: 1.5rem !important;
}

.trix-content img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

验证修复 #

重启Rails服务器后刷新页面，测试rich_text_area：

• 列表项目符号应正常显示
• 图片可正确渲染
• 其他Action Text功能保持正常

内容的提问来源于stack exchange，提问作者mutebi godfrey