Just started using [tailwindcss](https://tailwindcss.com/) in a [Next.js](https://nextjs.org/) project.

I set it up through my CSS file, and was trying to setup some basics for headers `h1`, `h2`, ... but I like separating the logic a bit so it doesn't get too messy, so I tried to `@import './typography.css' which includes some tailwind, but it doesn't work.

Here is my base CSS file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@import './typography.css';

```

My typography:

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

```

Any ideas on how I can get this to work?

**Update**

I've tried:

* Added `@layer base` in my typography.css file, but receive an error: `Syntax error: /typography.css "@layer base" is used but no matching @tailwind base`
* Also tried do it at the import layer, eg `@layer base { @import("typography.css") }`, that doesn't create an error but the styles aren't applied.