ASP.NET Core Razor页面中，Tailwind的calc()使用@model为何不生效？

问题根源：Tailwind CSS是静态扫描类名生成样式的，你在类名里用@Model.MainClassification.Count动态生成的calc表达式，Tailwind编译时无法识别这个动态值，因此不会生成对应的padding样式，导致页面没有预期变化。

解决方案1：用内联样式替代Tailwind的py类 #

把动态计算的上下padding值写到内联样式中，浏览器会直接解析计算结果：

@foreach (var item in Model.MainClassification)
{
    var paddingY = $"calc(27rem/{Model.MainClassification.Count})";
    <button class="flex justify-center items-center m-auto px-36" style="padding-top: @paddingY; padding-bottom: @paddingY;">@item</button>
}

注意：你原来写的align-middle是无效的Tailwind类，垂直居中应该用items-center。

解决方案2：提前计算值再绑定 #

先在Razor代码块里计算好padding值，再应用到元素上，代码更简洁：

@{
    var count = Model.MainClassification.Count;
    var pyValue = count > 0 ? $"calc(27rem/{count})" : "27rem";
}

@foreach (var item in Model.MainClassification)
{
    <button class="flex justify-center items-center m-auto px-36" style="padding-block: @pyValue;">@item</button>
}

这里用padding-block可同时设置上下padding，减少重复代码。

内容的提问来源于stack exchange，提问作者Mustafa Kaya