Using NextJS, how can you import in CSS using tailwind css?

Question

Just started using tailwindcss in a Next.js 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:

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

@import './typography.css';

My typography:

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.

Answer 1

Based on the docs from tailwind, here is a TLDR;

Install

npm install -D postcss-import

Update your postcss.config.js

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

Then in your main css file where you have the imports, you need to:

• rename the tailwindcss imports to from @import base; to @import "tailwindcss/base"; (same for the components and utilities
• Then you need to import in the proper order. If the file is a base put it after the base import, it's a components, put it after the components

@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";

Then in your custom-base-styles.css you can:

@layer base {
  h1 {
    @apply text-3xl text-slate-800;
  }
}