Using NextJS, how can you import in CSS using tailwind css? - 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

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 2

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

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

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