为什么顺风不使用我的typography.css？

Question

我有一个使用 TailWind 和 shadcn 的 NextJS 应用程序。我想将我的 global.css 分成单独的文件，例如排版：

全局.css：

@import "./typography.css";

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

@layer base {
    h1 {
        @apply text-2xl md:text-3xl lg:text-4xl;
    }

但是，如果我想将

h1

的样式移动到typography.css 中，它永远不会被应用。

排版.css：

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

@layer base {
    h1 {
        color: red; /* will be used, but NOT the @apply */
        @apply text-2xl md:text-3xl lg:text-4xl;
    }

    h2 {
        @apply text-2xl md:text-3xl lg:text-4xl;
    }

    h3 {
        @apply text-xl md:text-2xl lg:text-3xl;
    }

    h4 {
        @apply text-lg md:text-xl lg:text-2xl;
    }

    p {
        @apply text-base md:text-lg; 
    }
}

因此，当 h1 的 CSS 位于 global.css 中时，它就可以工作。当我删除它并仅将其保留在导入的typography.css 中时，它不会被应用。当我添加一个简单的

color: red

语句时，就会使用它。但不是@apply-statements。

我的 talwind.config.js 包含所有 CSS 文件：

const config: Config = {
  darkMode: ["class"],
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{css}",
  ],

我在这里想念什么？

Answer 1

global.css

中的 TailwindCSS @base 样式将应用于

typography.css

中的样式。根据您要进行的设置，您可以通过将

body

放在样式声明前面以增加其特异性来解决问题，如下所示：

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

@layer base {
  body h1 {
    @apply text-2xl md:text-3xl lg:text-4xl;
  }

  body h2 {
    @apply text-2xl md:text-3xl lg:text-4xl;
  }

  body h3 {
    @apply text-xl md:text-2xl lg:text-3xl;
  }

  ...rest of styles
}

这是一个工作示例。