@import some attribute not work in @layer tailwindcss

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.

Sean Ferney · Answer 1 · 2022-12-29T19:24:44.400

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.

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

@import some attribute not work in @layer tailwindcss

1 Answers1

UPDATE