Blazor 组件隔离 CSS，并使用 Tailwind/PostCSS

Question

能否在 Blazor 组件中使用 Tailwind 和 PostCSS 语法来进行 CSS 隔离？ 我非常喜欢 Tailwind 作为一个 CSS 框架，特别是它使用了 PostCSS 和 @apply 功能，可以将 Tailwind 的 CSS 组件捆绑到一个单独的类中。

例如：

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

我一直在考虑使用Svelte，因为它既提供了CSS隔离，又支持postcss @apply语法。但是现在Blazor也支持隔离的CSS，我真的很想再进一步，并能够在组件CSS中编写postcss样式。

那么，你有任何想法吗？是否已经可以实现这一点？

- CT14.IT

Answer 1

是的，这是可能的！已经在.NET 5.0上测试过

您需要在项目根目录中创建一个新的npm项目。

1. 使用npm init来创建一个新的npm项目。
2. 使用npm i -D postcss-cli autoprefixer postcss tailwindcss添加tailwind和postcss的依赖项
3. 添加postcss的配置文件

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

4. 使用npx tailwindcss init将tailwind.config.js添加到项目中。 如有需要，您可以替换purge属性以删除未使用的CSS类。但在我使用Razor库时，这在我的测试中有些有bug。

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

5. 在.csproj文件中添加post-css构建脚本。这将在每次构建后对Blazor打包的样式表应用postcss规则。

对于Blazor项目：

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

针对 Blazor 组件库：

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

我不确定为什么路径不同，我找不到任何文件说明。如果有人知道更多信息，请随时回复。

如果有任何不明白的地方或可以改进的地方，请告诉我！

- Philipp Sonntag

---

非常感谢您对此提供的意见，在使用标准的 Blazor Web 项目而没有使用组件库或直接编译组件库时，它可以完美地工作。但是，当 Web 项目引用组件库时，我认为存在一个问题。似乎组件库已编译的 CSS 的第一行是 @import '';，这会让 postcss 进程感到困惑，有什么想法吗？再次感谢。 - CT14.IT

我才刚开始尝试，但它似乎也适用于 .NET 6！我用 $(TargetFramework) 替换了 net5.0，使它更加通用。 - Oskar

你试过使用dotnet 8 RC1吗？ - undefined