Is it possible to use TailwindCSS in custom cards?

Configuration Frontend
1

Is it possible to use TailwindCSS in custom cards? I could not find anything related to it nor anyone using it.

I tried to do it by myself and managed to get the custom element working in a simple test:
Screenshot from 2023-05-24 08-18-09

But when loading the card in home assistant, the styles are not applied:

Screenshot from 2023-05-24 08-17-41
Screenshot from 2023-05-24 08-17-411091×328 20.8 KB

First i thought that the problem was Home Assistant not loading the CSS, but now i’m injecting the CSS into the final JS with Vite. It is working, but not on Home Assistant.

You can read the code i made for the tests here: usernein/tailwindcss-in-hass

I did it using Preact, TypeScript, Vite, TailwindCSS and PostCSS

2

I got it working! I’m not the best candidate for explaining but it’s something related to the incompatibility of the way TailwindCSS works with Web Components.
If i understood correctly, TailwindCSS styles are inserted on <head>, where web components with shadow root cannot inherit from.
To solve it, i used a package called Twind, which, among many other cool features, allow me to translate the TailwindCSS classes to the real CSS and put the result manually inside the component’s shadow root. And it works!!!

You can read more about the problem and the solution here: Add Tailwind styles to shadow DOM

And you can check my code with the solution in this commit

I may soon create some cards with TailwindCSS
As soon as i get something cool, i’ll share here with you

3

that could be a gamechanger.

1 Like
4

That’s true! With TailwindCSS, developing pretty custom card becomes soooo much easier
I hope more people gets to find this and start using TailwindCSS as i’m doing now

6

Exciting news! I developed “TailwindCSS Template Card”, which you can use to experiment TailwindCSS with Home Assistant and build pretty cards with instant rendering while editing!

Check out this topic: TailwindCSS Template Card - build custom cards with HTML and TailwindCSS