Blazor component isolated css with tailwind/postcss

Question

Is it possible to use tailwind and postcss syntax for blazor component isolated css?

I really like Tailwind as a CSS framework specifically its use of postcss and the @apply functionality where you can bundle tailwinds css components into an individual class.

e.g.

.some-button {
    @apply px-4 py-2 bg-blue-400 text-white
}

I've been considering using Svelte because it offers both CSS isolation and postcss @apply syntax. However now that Blazor supports isolated CSS I would really like to take it a small step further and be able to write postcss styles from within component CSS.

So... any idea if that's possible yet?

Dorman

Answer 1

Yes, it's possible! Tested with .NET 5.0

You have to create a new npm project in the projects root directory.

1. Use npm init to create a new npm project.
2. Add the dependencies of tailwind and postcss with npm i -D postcss-cli autoprefixer postcss tailwindcss
3. Add a config for postcss

// postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
}

4. Add the tailwind.config.js to the project using npx tailwindcss init. If needed, you can replace the purge property to remove unused css classes. But this was a bit buggy in my tests when I used a Razor library.

// tailwind.config.js
purge: {
    enabled: true,
    content: [
        './**/*.html',
        './**/*.razor',
        './**/*.razor.css'
    ],
},

5. Add a post-css buildscript to your .csproj file. This will apply postcss rules to the stylesheets bundled by Blazor after each build.

For Blazor projects:

<Target Name="PostBuild" AfterTargets="PostBuildEvent">
    <Exec Command="npx postcss $(ProjectDir)obj\$(ConfigurationName)\net5.0\scopedcss\bundle\$(ProjectName).styles.css -r" />
</Target>

For Blazor component libraries:

<Target Name="PostBuild" AfterTargets="PostBuildEvent">
    <Exec Command="npx postcss $(ProjectDir)obj\$(ConfigurationName)\net5.0\scopedcss\projectbundle\$(ProjectName).bundle.scp.css -r" />
</Target>

I'm not sure why the path differs, I can't find any documentation to it. If someone knows more, feel free to reply.

If there's anything that doesn't make sense or could be done better, please let me know!

Brevet

Thanks so much for your input on this, it works perfectly when using a standard Blazor web project without a component library or compiling a component library directly. However I think there's an issue when a web project references a component library. It seems the very first line of the component lib compiled CSS has @import ''; which I think confuses the postcss process, any ideas? Thanks again – Dorman

I'm just getting started but it seems to work for .NET 6 as well! I replaced net5.0 with $(TargetFramework) to make it more agnostic. – Wapentake

did you try with dotnet 8 RC1? – Snooker