child css

[Mic1]

is the only way to tailwind e.g.

.DrawerToggle div { width: 90%; height: 3px; background-color: white; }

by using a plug in such as "npm install tailwindcss-children"? Thanks.

[adamwathan]

Not totally sure what you're asking but you can just write that exact custom CSS in your CSS file and it'll work fine. It's totally ok to write custom CSS alongside using the classes Tailwind gives you. Installing that plugin wouldn't really help you create that CSS, it will only help you add styles to children that are within your design system, and width: 90% and height: 3px are not normal Tailwind values.

[Mic1]

Ah so one does not have to be fanatical and convert everything to tailwind, right? So in Svelte I can put everything that does not easily convert to tailwind inside a <style></style> block and "mix and match"? As an aside, do you know of a good resource that really explains the benefits of tailwindcss? As a newbie to tailwind I see my svelte components as really cluttered as compared to encapsulating all css in the svelte <style></style? block. Thanks in advance.
Edit: I think I have just found a very good reason to use Tailwind with Svelte ... Svelte <style> block will not penetrate component css, only html element css, which I never realized until I wanted to format the "a" tag inside svelte-navigator "Link" component ... lot of discussions on this and some less than optimal workarounds (#global etc). Inline style does penetrate:

(<)Link style="background-color:red;font-size:160%"(>)

so using Tailwind makes total sense here as I believe it also penetrates the Svelte component and bg-red-500 is far more concise!