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?

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!