Remix项目中Tailwind.css无法加载文件或应用样式的问题

问题分析 #

• 用LinksFunction引用/styles/tailwind.css出现404：Remix不会直接暴露app目录下的文件给浏览器，该路径指向的是public/styles目录而非app/styles，因此无法找到文件。
• 直接import './styles/tailwind.css'样式不生效：未通过Remix的资源处理流程编译CSS，浏览器将其当作JS模块解析，无法识别样式规则。

正确解决方案 #

步骤1：完成Tailwind基础配置 #

先安装依赖并初始化配置文件：

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

在tailwind.config.js中配置项目内容路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

在app/styles/tailwind.css中添加Tailwind核心指令：

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

步骤2：通过LinksFunction正确引用CSS #

使用Remix的资源导入语法（?url后缀）获取编译后的CSS文件URL，再通过LinksFunction注入页面：

import { LinksFunction } from '@remix-run/node';
import tailwindStyles from './styles/tailwind.css?url';

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: tailwindStyles }
];

这种方式会让Remix自动处理CSS的编译与资源路径映射，既不会出现404，也能让浏览器正确识别为样式文件。

替代方案：手动输出到public目录 #

如果偏好手动管理静态资源，可修改配置将编译后的CSS放到public/styles目录：

1. 修改tailwind.config.js添加输出配置：

module.exports = {
  // ...其他配置
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  output: "./public/styles/tailwind.css"
}

2. 在package.json中添加Tailwind构建脚本：

{
  "scripts": {
    "build:tailwind": "tailwindcss -i ./app/styles/tailwind.css -o ./public/styles/tailwind.css",
    "build": "npm run build:tailwind && remix build"
  }
}

3. 之后即可通过LinksFunction正常引用：

import { LinksFunction } from '@remix-run/node';

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

内容的提问来源于stack exchange，提问作者Mr. Cockadookie