CODEWITHSUNDEEP
tailwind-css
denislexic
denislexic

Reputation: 11342

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

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:

Upvotes: 11

Views: 22541

Answers (7)

Mehmet Ali Ayvaz
Mehmet Ali Ayvaz

Reputation: 11

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.

Upvotes: 1

Sean Ferney
Sean Ferney

Reputation: 98

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.

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

Upvotes: 0

denislexic
denislexic

Reputation: 11342

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

Upvotes: 6

TNT
TNT

Reputation: 3620

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

Upvotes: 2

shihab
shihab

Reputation: 156

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

    npm install -D postcss-import

  1. update postcss.config.js file

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

  2. 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

Upvotes: 0

Laynor
Laynor

Reputation: 1533

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'),
])

Upvotes: 0

Guillaume Acard
Guillaume Acard

Reputation: 419

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

Upvotes: 3

Related Questions