如何使用顺风CSS导入css？

Question

刚刚开始在一个尾风项目中使用Next.js。

我通过我的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

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

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

这里的文档中有更多的细节：https://tailwindcss.com/docs/adding-base-styles

Answer 2

您必须使用postcss-import

https://tailwindcss.com/docs/adding-custom-styles#using-multiple-css-files

https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

如果你使用拉拉维尔webpack混合，加入它在.postCss(....)中

.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'), // <------------ add postcss-import here
    require('tailwindcss'),
])

Answer 3

1. 已使用的poscss和postcss-导入插件导入插件 安装-D postcss-导入
2. 更新postcss.config.js文件 module.exports ={ plugins：{‘postcss’：{}，tailwindcss：{}，}
3. 将@tailwind base;添加到typography.css的顶部

有关更多的数据，您可以查看以下链接：https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports