Tailwind 在使用 remix 时不应用样式答案

【问题标题】：Tailwind not applying the styles when working with remixTailwind 在使用 remix 时不应用样式
【发布时间】：2023-02-10 23:28:55
【问题描述】：

我遵循了本指南：https://tailwindcss.com/docs/guides/remix 一步一步（两次，可以肯定）。但没有任何效果。

我的顺风配置 js 看起来像这样：

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

我的根：

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

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

我在 app 文件夹和我创建的 app.css 中创建了一个名为 styles 的新文件夹，其中包含以下内容：

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

我正在尝试设计我的 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”但我在索引中的 h1 上没有任何风格。

任何帮助表示赞赏。

【问题讨论】：

您是否使用新脚本更新了 package.json？

标签： tailwind-css remix

【解决方案1】：

您需要创建 2 个新的“styles”文件夹，第一个与 package.json 处于同一级别，并在此处使用代码创建 app.css 文件：

./styles/app.css

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

第二个样式文件夹在“app”目录中（这里的 tailwind 命令将导出编译后的 CSS）

./app/styles/app.css 这是 tailwindcss 命令的输出

然后就可以在root.js(x)文件中引入./app/styles/app.css文件

import styles from "./styles/app.css"

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

【讨论】：

【解决方案2】：

我遇到了同样的问题，我想向@Michael 补充一点，当我将来自 remix 的 <Links /> 组件包含在头部时，它对我有用。

import { Links } from '@remix-run/react'

<head>
  <Links />
...
</head>

您的 links() 函数将不会被包含在内。

【讨论】：