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.

user_1323349 · Answer

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

user_4929727 · Answer

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

user_3312838 · Answer

used poscss and postcss-import-plugin import plugin

npm install -D postcss-import

update postcss.config.js file

module.exports = { plugins: { 'postcss-import': {}, tailwindcss: {}, } }
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

How can you import in CSS using tailwind css?

3 Answers