Tailwind + Blazor isolated CSS

[kevonh]

With the release of .Net 5.0, Microsoft introduced the concept of isolated CSS. Meaning, one can write a "component" which encapsulates some small HTML markup, and further one can attach a CSS file directly on the component and the CSS is "Isolated" to that component.

So, if I have a "Card.razor" component which represents a header and a body I could have "Card.Razor.css" attached to it where I defined the styles which apply to the card.

The issue with the above approach is that the @apply does not seem to do anything in the isolated css files.

Is there a way to configure the Tailwind processor to crawl the solution and look at ALL css files for things with the @apply directive?

[Chris-Mingay]

I too am interested in this! I am definitely using tailwind for my next project but ideally I would like to use it with blazor component isolation as well.

Blazor auto builds CSS by looking for [Component].razor.css files. The following is taken from here - dotnet/aspnetcore#10170 (comment)

Preprocessors(LESS/SASS/etc)

We're not doing anything specific here, but we don't need to. If you want to have MyComponent.razor.sass, you're of course able to do so - you just need to make sure it gets compiled to MyComponent.razor.css before Blazor's build process goes looking for that file. Some people may prefer to do this using an IDE add-in that auto-compiles SASS/LESS to CSS on each save; others might want to hook in Webpack during the build - either is possible.

So I am wondering if we can use gulp to watch for e.g. MyComponent.razor.scss files that contain @apply rules and spit out postcss processed .css files that sit next to the original scss files?