css 与 tailwind/postcss 隔离的 Blazor 组件

Question

是否可以对孤立的 blazor 组件使用 tailwind 和 postcss 语法 css?

我真的很喜欢 Tailwind 作为一个 CSS 框架，特别是它使用 postcss 和 @apply 功能，您可以在其中捆绑 tailwinds css 组件变成一个人 class.

例如

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

我一直在考虑使用 Svelte，因为它提供了 CSS 隔离和 postcss @apply 语法。但是，现在 Blazor 支持孤立的 CSS 我真的很想更进一步，能够从组件 CSS.[=14 中编写 postcss 样式=]

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

Answer 1

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

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

使用npm init创建一个新的 npm 项目。
添加tailwind和postcss与npm i -D postcss-cli autoprefixer postcss tailwindcss
为 postcss

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

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

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

将 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>

我不确定为什么路径不同，我找不到任何文档。如果有人知道更多，欢迎回复。

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

css 与 tailwind/postcss 隔离的 Blazor 组件

Blazor component isolated css with tailwind/postcss

postcss

blazor

tailwind-css