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;
  }
}

Answer 2

You need set the target layer for this to work. Since you want to change the base html elements in your typography.css file do:

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

More details in the documentation here: https://tailwindcss.com/docs/adding-base-styles

Answer 3

According to the docs the issue is a matter of the order of the statements. They recommend to put the @tailwind base; statement in a seperate file and import it like this:

@import "./tailwind-base-statement.css";
@import "./typography.css";

Answer 4

You must use postcss-import

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

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

if you use Laravel webpack mix, add it in .postCss(....)

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

Answer 5

1. used poscss and postcss-import-plugin import plugin

   npm install -D postcss-import

2. update postcss.config.js file

   module.exports = { plugins: { 'postcss-import': {}, tailwindcss: {}, } }

3. add @tailwind base; inside top of your typography.css

for more deatils you can check this link: https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

Answer 6

I found something that seems to work for me. Basically postcss-import has its own layer system that we can use instead of tailwinds layer system.

@import 'tailwindcss/base' layer(Base);
@import './base/typography.css' layer(Base);

@import 'tailwindcss/components' layer(Components);

@import 'tailwindcss/utilities' layer(Utilities);

@layer Base {
  #root {
    @apply some-styles;
  }
}

In postcss-import#usage it describes using layer() with @import

...
@import 'baz.css' layer(baz-layer);
...

I used uppercase layer names to avoid conflicting with tailwinds layers.

Install postcss-import as described in tailwinds article. using-with-preprocessors#build-time-imports Then add layer() to your imports like @import 'tailwindcss/base' layer(Base). Also rename your @layers calls to something different than tailwinds layers.

For examples you can look any of the test fixtures with layer in the filename. postcss-import/test/fixtures

UPDATE

The root cause of this for me was using Create React App. Because it doesn't allow you to configure postcss.config.js.

So another solution would be to migrate to something else instead.

• darekkay/create-react-app-to-vite#migration
• tailwindcss.com/issues/1472
• tailwindcss/guides/create-react-app

we highly recommend using Vite, Next.js, Remix, or Parcel instead of Create React App

Answer 7

In NextJs projects, we may get some errors after the import process. Especially if we use @layer components in the file we import in the NextJs project, we may get errors. I will explain a detailed solution to prevent these errors.

Firstly, let's move the file we imported to the top.

@import './typography.css';

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

Then install these two packages.

npm i postcss-import
npm i postcss-nesting

Then edit our postcss.config.js file as follows.

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  },
};

Finally, stop and restart the terminal.