Blazor 组件与 tailwind/postcss 隔离的 css

Question

是否可以将 tailwind 和 postcss 语法用于 blazor 组件隔离的 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 样式。

所以......知道这是否可能吗？

Answer 1

是的，这是可能的！ 使用 .NET 5.0 进行测试

您必须在项目根目录中创建一个新的 npm 项目。

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

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

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

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

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

对于 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>

我不确定路径为何不同，我找不到任何文档。如果有人知道更多，请随时回复。

如果有任何不合理或可以做得更好的地方，请告诉我！