Tailwind在混音时没有应用这些风格

我遵循了本指南：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.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的风格。

感谢任何帮助。

您需要创建2个新的"样式"；文件夹，第一个与package.json处于同一级别，并在此位置创建app.css文件，代码为：

./styles/app.css

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

第二个样式文件夹位于"；应用程序"；目录(这里的顺风命令将导出编译的CSS(

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

然后您可以导入/根.js(x(文件中的app/styles/app.css文件

import styles from "./styles/app.css"
export function links() {
  return [{ rel: "stylesheet", href: styles }]
}

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

import { Links } from '@remix-run/react'
<head>
  <Links />
...
</head>

否则将不会包含您的links((函数。

相关内容

最新更新

热门标签：