Skip to content

Clarify import order #2235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mrleblanc101 opened this issue May 5, 2025 · 1 comment
Closed

Clarify import order #2235

mrleblanc101 opened this issue May 5, 2025 · 1 comment

Comments

@mrleblanc101
Copy link

mrleblanc101 commented May 5, 2025

I don't know if @import 'http://github.com/tailwindcss'; should be before or after @config "../../tailwind.config.js";.
Also, I'm not sure if @import 'http://github.com/fonts.css' layer(base); should be first like in JavaScript, then we init tailwind with @import 'http://github.com/tailwindcss';.
Or if @import 'http://github.com/tailwindcss'; should always be first !

@import './fonts.css' layer(base);

@import 'tailwindcss';

@config "../../tailwind.config.js";
@mrleblanc101 mrleblanc101 changed the title Document import order Clarify import order May 5, 2025
@philipp-spiess
Copy link
Member

In CSS, import rules are supposed to be going before anything else, so having @config at the end here makes sense to me. Regarding where to put your fonts.css import: It's really about where in the resulting CSS you want to have it. Notice though that the tailwindcss library does set up all layers for you and you're now declaring a base layer before anything else, practically before the @layer theme too: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/index.css#L1. So if you do what you're suggesting here, theme will come after base. Because of that I'd recommend you keep the order this way:

@import 'tailwindcss';
@import './fonts.css' layer(base);
@config "../../tailwind.config.js";

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants