Yes, it's possible! Tested with .NET 5.0
You have to create a new npm project in the projects root directory.
- Use
npm init to create a new npm project.
- Add the dependencies of tailwind and postcss with
npm i -D postcss-cli autoprefixer postcss tailwindcss
- Add a config for postcss
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
- 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'
],
},
- 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!
