Shadcn/ui在Remix应用中导入tailwindcss时构建失败求助

按照Shadcn/ui的Remix安装文档要求，用import styles from "./tailwind.css"导入样式文件时，出现编译错误：

app/root.tsx (11:7): "default" is not exported by "app/tailwind.css", imported by "app/root.tsx".

这个错误会导致前端JavaScript无法运行，只能依赖服务端渲染，且无法执行npm run build完成编译。

解决方法 #

方法1：改用Remix原生的CSS引用方式

Remix默认不支持将CSS作为ES模块导入，直接用字符串路径在links函数中引用即可，替换掉默认导入的写法：

// 移除这行：import styles from "./tailwind.css"
import type { LinksFunction } from "@remix-run/node";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: "./tailwind.css" },
];

方法2：配置CSS Bundle支持

如果想保留模块导入的方式，可以通过Remix的CSS Bundle插件实现：

1. 安装依赖：

npm install @remix-run/css-bundle

2. 修改app/root.tsx：

import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

3. 确保app/tailwind.css包含正确的Tailwind指令：

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

问题原因 #

Shadcn/ui的文档写法更适配Next.js这类支持CSS模块默认导入的框架，但Remix原生将CSS视为静态资源，而非ES模块，因此直接用import styles from "./tailwind.css"会触发导出错误。

内容的提问来源于stack exchange，提问作者Nathan Tregillus