-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
base: next
Are you sure you want to change the base?
Add @import "…" reference
#15228
Conversation
e46c009
to
71bcb8e
Compare
d567629
to
ab606db
Compare
NICE this is what i was looking. you can do something similar now with @import "tailwindcss/theme" theme(reference);
|
@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 |
@@ -18,7 +18,7 @@ export type ThemeConfig = Record<string, ThemeValue> & { | |||
|
|||
export interface ResolvedConfig { | |||
theme: Record<string, Record<string, unknown>> | |||
plugins: PluginWithConfig[] |
There was a problem hiding this comment.
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?)
There was a problem hiding this comment.
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. 😐
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah lets do that
df4d4ae
to
b570aa0
Compare
Co-authored-by: Jordan Pittman <[email protected]>
be40735
to
ba18c43
Compare
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:
Importing a file as a reference will convert all
@theme
block to bereference
, 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 viaaddBase()
.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.