New*_*Aeg 4 tailwind-css remix
我已经按照本指南进行操作：https://tailwindcss.com/docs/guides/remix 一步一步（当然，两次）。但没有任何作用。
我的 tailwind 配置 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 上没有任何样式。
任何帮助表示赞赏。
小智 8
您需要创建 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 }]
}
<Links />我遇到了同样的问题，我想添加到@Michael's，当我将remix 中的组件包含在头部内时，它对我有用。
import { Links } from '@remix-run/react'
<head>
<Links />
...
</head>
否则您的 links() 函数将不会被包含在内。
| 归档时间： |
|
| 查看次数： |
3106 次 |
| 最近记录： |