#import some attribute not work in #layer tailwindcss - layer

Question

Destructing the file and all import to the tailwindcss.css file. It failed when i import from other file instead write it in tailwind.css.
Use layer to apply custom font family and text-3xl (working in this way)
// tailwind.css
#tailwind base;
#layer base {
h1 {
#apply font-heading text-3xl;
}
}
#import from outside css file, it cannot work as usual. The font-heading is work, but font-size(text-3xl) is not working.
#tailwind base;
#layer base {
#import "./fonts/index.css";
}
// fonts/index.css
h1 {
#apply font-heading text-3xl
}
What i guess:
it load #import css first before load #tailwind base, default base will overwrite my h1 font-size to tailwindcss default.
Do any workaorund could avoid this behavior in tailwindcss? it look messy if all style in tailwindcss file.

Answer 1

https://stackoverflow.com/a/74943254/11710789
Also posted there ^^^
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 is 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