Tailwind样式在Remix项目中不生效，寻求技术帮助

问题详情 #

严格按照Tailwind官方Remix指南操作两次，但样式仍未生效。相关配置及代码如下：

1. tailwind.config.js 配置：

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

2. Root文件 代码：

import styles from './styles/app.css';

export function links() {
  return [{ rel: 'stylesheet', href: styles }];
}

3. app/styles/app.css 内容：

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

4. index.tsx 测试代码：

export default function Index() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1 className='text-3xl font-bold text-blue-500 underline'>Hello world!</h1>
    </div>
  );
}

执行 npm run dev 后，index页面中的h1元素未应用Tailwind样式。

解决思路 #

• 检查依赖与PostCSS配置：确保已安装 tailwindcss、postcss、autoprefixer，且存在正确的 postcss.config.js 文件。该文件需包含Tailwind插件：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

如果未生成该文件，可手动创建或执行 npx tailwindcss init -p 生成。

• 验证Content路径匹配度：确认 tailwind.config.js 中 content 数组的路径覆盖了所有使用Tailwind类的文件。若项目存在其他目录（如 routes），需补充路径，示例：

content: ['./app/**/*.{js,ts,jsx,tsx}', './routes/**/*.{js,ts,jsx,tsx}']

• 确认Root组件有效性：检查Root文件是否为 app/root.jsx 或 app/root.tsx，且项目入口正确使用了该组件，未被其他文件覆盖。

• 清理缓存并重启服务：执行缓存清理命令（如 rm -rf node_modules/.cache），再重新运行 npm run dev，避免缓存导致样式未更新。

• 检查CSS加载状态：在浏览器开发者工具的Network标签中，查看 app.css 是否成功加载，且文件内容包含Tailwind生成的具体样式（而非仅原始的 @tailwind 指令）。

• 排查Remix配置：若自定义了 remix.config.js，确保未禁用CSS处理，且配置了正确的CSS loader。

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