search

tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
82.72k stars 4.19k forks source link

[v4] Expose CSS properties also to :host #14478

Open lubomirblazekcz opened 1 month ago

lubomirblazekcz commented 1 month ago

What version of Tailwind CSS are you using?

For example: v4.0.0-alpha.21

Describe your issue

Currently the @theme CSS properties are exposed to :root, which is great but it would be also good to expose it to :host, like this :root, :host {}. This way the CSS properties are also available in web components.

Lets say you have a widget as web component <custom-widget></custom-widget> and inside there is CSS and tailwindcss classes in shadowroot, :root will not work - in this scenario the :host is the :root for the web component.

Eg. how it's done in Winduum here - https://github.com/winduum/winduum/blob/next/src/base/theme/default.css

KennethHoff commented 2 weeks ago

Speaking of, you should probably like/post your feedback to this CSS proposal

https://github.com/w3c/csswg-drafts/issues/11000