Skip to content
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

Add @import "…" reference #15228

Open
wants to merge 10 commits into
base: next
Choose a base branch
from
Open

Add @import "…" reference #15228

wants to merge 10 commits into from

Conversation

philipp-spiess
Copy link
Member

@philipp-spiess philipp-spiess commented Nov 28, 2024

Closes #15219

This PR adds a new feature, @import "…" reference that can be used to load Tailwind CSS configuration files without adding any style rules to the CSS.

The idea is that you can use this in combination with your Tailwind CSS root file when you need to have access to your full CSS config outside of the main stylesheet. A common example is for Vue, Svelte, or CSS modules:

@import "./tailwind.css" reference;

.link {
  @apply underline;
}

Importing a file as a reference will convert all @theme block to be reference, so no CSS variables will be emitted. Furthermore it will strip out all custom styles from the stylesheet. Furthermore plugins registered via @plugin or @config inside reference-mode files will not add any content to the CSS file via addBase().

Test Plan

Added unit test for when we handle the import resolution and when postcss-import does it outside of Tailwind CSS. I also changed the Svelte and Vue integration tests to use this new syntax to ensure it works end to end.

@philipp-spiess philipp-spiess changed the title Add @import ... reference Add @import "..." reference Nov 28, 2024
@philipp-spiess philipp-spiess changed the title Add @import "..." reference Add @import "…" reference Nov 29, 2024
@philipp-spiess philipp-spiess force-pushed the feat/import-reference branch 4 times, most recently from e46c009 to 71bcb8e Compare November 29, 2024 16:36
@philipp-spiess philipp-spiess marked this pull request as ready for review November 29, 2024 16:48
@philipp-spiess philipp-spiess requested a review from a team as a code owner November 29, 2024 16:48
@TiBianMod
Copy link

TiBianMod commented Nov 30, 2024

NICE this is what i was looking.

you can do something similar now with

@import "tailwindcss/theme" theme(reference);

https://tailwindcss.com/docs/v4-beta#using-apply-in-vue-svelte

@philipp-spiess
Copy link
Member Author

@TiBianMod Yep but we figured it's unintuitive to have to split your config up like this and there are further customizations (e.g. custom @utility or @variant rules) that you can't import via theme(reference). We hope this new API will make it easier!

@@ -18,7 +18,7 @@ export type ThemeConfig = Record<string, ThemeValue> & {

export interface ResolvedConfig {
theme: Record<string, Record<string, unknown>>
plugins: PluginWithConfig[]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one feels wrong to change. In theory this type could be exposed to the user (it might be with the config() function actually — that works in v4 right?)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yep you are right this is currently exposed and this does break user space. Need to make it even uglier and emit this as a separate Set<> like you suggested via DM. 😐

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also potentially put it into PluginWithConfig since that is already an object with a handler function in v3, adding a new property there would not be an issue I think then. WDYT?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah lets do that

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

Successfully merging this pull request may close these issues.

[v4] Files imported with @import "…" theme(…) must only contain @theme blocks
3 participants