postcss-import

[seanpanda0]

Context

In this article about postcss-import.
using-with-preprocessors#build-time-imports

There is an issue with implementing that as described.

Basically @layer and @tailwind(from tailwind) dont play nicely with @import(from postcss-import).

Problems with the article

One you cant use @layer base in a imported file without also declaring @tailwind base in the same file. duplicating the @tailwind base declaration also duplicates tailwinds base css declarations. (some rule applies to the @import 'tailwindcss/base').
You get errors like this Syntax error: /typography.css "@layer base" is used but no matching "@tailwind base" directive is present.

Two declaring @import 'tailwindcss/base' before @import './custom-base.css' does not actually place the css declarations in the right order. the @tailwind declarations seem to be processed after the @imports no mater what order you place them in. the result is tailwindcss/base overrides the custom-base.css despite the order.

Working Solution and postcss-import layer system.

Basically you can use postcss-import layers instead of tailwinds layers and then things are placed in the expected order and you can use @layer inside of imported files.

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

I would like the postcss-import layer system to be mentioned in that article.
I'd make a PR for the documentation if I was sure where I should put it.

This works a lot better if you're going to be importing css files.

Versions

postcss-import@^14.1.0:
  version "14.1.0"
  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz"
  
tailwindcss@^3.0.2, tailwindcss@^3.2.4:
  version "3.2.4"
  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz"
  
react@^18.2.0:
  version "18.2.0"
  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
 

References

Unfortunately I didn't find additional documentation for postcss-import layers.
However you can find examples in under their tests fixtures,
anything with layer in the filename should be helpful.

• https://stackoverflow.com/questions/67342849/import-some-attribute-not-work-in-layer-tailwindcss/74943618#74943618
• https://stackoverflow.com/questions/69746121/how-can-you-import-in-css-using-tailwind-css/74943254#74943254
• https://github.com/postcss/postcss-import#usage
• https://github.com/postcss/postcss-import/tree/master/test/fixtures
• https://github.com/postcss/postcss-import/blob/master/test/fixtures/layer.css

[adamwathan]

Hey! Can you create a simple project that shows something being broken? That would make it much easier to get on the same page about what we're talking about here.

One you cant use @layer base in a imported file without also declaring @tailwind base in the same file. duplicating the @tailwind base declaration also duplicates tailwinds base css declarations.

Two declaring @import 'tailwindcss/base' before @import './custom-base.css' does not actually place the css declarations in the right order. the @tailwind declarations seem to be processed after the @imports no mater what order you place them in. the result is tailwindcss/base overrides the custom-base.css despite the order.

Neither of these are true in my testing, here's a working demo where you can see you don't need to duplicate @tailwind base and where the styles from custom-base.css are properly overriding our Preflight styles from tailwindcss/base:

https://github.com/adamwathan/issue-1472

[seanpanda0]

This is a repo replicating the issue.
https://github.com/seanpanda0/tailwind-import-layer-issue

Followed these two guides

• https://tailwindcss.com/docs/guides/create-react-app
• https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
  

[adamwathan]

Ah ok so the problem is you are using Create React App and it doesn't support postcss.config.js files or any way of configuring PostCSS at all. So what's happening here is just that postcss-import isn't even being used.

Unfortunately nothing we can do here, there's an open PR on the CRA repo but I don't expect it to be merged: facebook/create-react-app#11926

I would recommend just not using CRA if you can avoid it — it's quite configuration-hostile and not really actively maintained.

Going to close this since this is a CRA problem and we can't do anything about it on our end.

[seanpanda0]

@adamwathan
Then how about adding a warning or some other mention of that to the tailwind create-react-app article?
https://tailwindcss.com/docs/guides/create-react-app

Or perhaps there is a much better alternative you could recommend in that article instead. And the article can be replaced. Seems like it might be a good change.

Ps: thanks for the help and for checking this out.

[adamwathan]

@seanpanda0 Yeah that's why we have this big warning at the top of the guide:

I think we can probably make it more in your face and scary though, will see what I can come up with.

[adamwathan]

Let's try this for a while and see if it helps 😅

[seanpanda0]

Awesome!