使用 NextJS，如何使用 tailwind css 导入 CSS？

Question

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

我通过 CSS 文件进行设置，并尝试为 headers 设置一些基础知识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;
}
...

关于如何让它发挥作用有什么想法吗？

更新

我试过了：

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

Answer 1

根据tailwind 的文档，这里有一个 TLDR；

安装

npm install -D postcss-import

更新您的postcss.config.js

npm install -D postcss-import

然后在你有导入的主 css 文件中，你需要：

• 将导入重命名tailwindcss为 from @import base;to （与和@import "tailwindcss/base";相同）componentsutilities
• 然后您需要按正确的顺序导入。如果文件是 abase将其放在base导入之后，则它是 acomponents将其放在导入之后components

// /postcss.config.js
module.exports = {
    plugins: {
        "postcss-import": {}, // <= Add this
        tailwindcss: {},
        autoprefixer: {}
    }
}

然后custom-base-styles.css你可以：

@import "tailwindcss/base"; // <= used to be `@tailwind base;`
@import "./custom-base-styles.css";

@import "tailwindcss/components"; // <= used to be `@tailwind components;`
@import "./custom-components.css";

@import "tailwindcss/utilities"; // <= used to be `@tailwind utilities;`
@import "./custom-utilities.css";