如何使用 tailwind css 导入 CSS？答案

【问题标题】：How can you import in CSS using tailwind css?如何使用 tailwind css 导入 CSS？
【发布时间】：2021-12-13 04:27:05
【问题描述】：

刚开始在Next.js 项目中使用tailwindcss。

我通过我的 CSS 文件进行了设置，并尝试为标题 h1、h2 设置一些基础知识……但我喜欢将逻辑分开一点，这样它就不会变得太混乱，所以我尝试了 `@import './typography.css'，其中包含一些顺风，但它不起作用。

这是我的基本 CSS 文件：

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

@import './typography.css';

我的排版：

h1 {
    @apply text-6xl font-normal leading-normal mt-0 mb-2;
}
...

关于如何让它发挥作用的任何想法？

更新

我试过了：

在我的typography.css 文件中添加了@layer base，但收到错误：Syntax error: /typography.css "@layer base" is used but no matching @tailwind base
还尝试在导入层执行此操作，例如@layer base { @import("typography.css") }，这不会产生错误但未应用样式。

【问题讨论】：

【解决方案1】：

您需要设置目标图层才能使其正常工作。由于您想更改 typography.css 文件中的基本 html 元素，请执行以下操作：

@layer base {
    h1 {
        @apply text-6xl font-normal leading-normal mt-0 mb-2;
    }
}

【讨论】：

所以，我将@layer base {... } 放在了我的typography.css 文件中，现在出现了这个错误：Syntax error: /typography.css "@layer base" is used but no matching @tailwind base` 指令存在。`
PS 我也尝试过@layer base { @import("typography.css") }，它不会产生错误但不会应用样式。