Rails 8 + Tailwind 4样式导入报错：无法解析notices.css如何解决？

云上老周

2026-6-12

Rails 8 + Tailwind 4 导入CSS文件报错的解决方法

问题原因

你遇到的Error: Can't resolve 'notices/notices.css'错误，核心是app/assets/tailwind/application.css里的导入路径写法不符合Tailwind的查找规则。你用了绝对路径/notices/notices.css，但Tailwind会从当前文件所在目录（app/assets/tailwind）开始检索，绝对路径会让它去项目根目录查找，自然找不到目标文件。

解决步骤

方法1：使用相对路径（推荐）

直接修改app/assets/tailwind/application.css的导入语句，改成相对路径写法：

@import "tailwindcss";
/* 两种写法均有效 */
@import "./notices/notices.css";
/* 或者省略./，Tailwind会自动在当前目录下检索 */
/* @import "notices/notices.css"; */

方法2：配置Tailwind路径搜索规则（可选）

如果需要统一管理文件路径，可以在tailwind.config.js中添加paths配置，指定CSS文件的搜索目录：

module.exports = {
  content: [
    './app/views/**/*.{html,erb,slim}',
    './app/helpers/**/*.rb',
    './app/assets/javascripts/**/*.js',
    './app/components/**/*.{rb,html,erb,slim}',
  ],
  // 添加paths配置，指定CSS文件根目录
  paths: {
    css: ['./app/assets/tailwind'],
  },
  theme: {
    extend: {},
  },
  plugins: [],
}

配置完成后，就可以直接用@import "notices/notices.css"导入目标文件。