为什么Svelte会将已定义的:nth-child样式标记为未使用不编译？

问题原因 #

核心有两点：

1. 你在模板中使用了Tailwind的响应式前缀lg:/md:/sm:，元素实际渲染后的类名是lg:cell-lg、md:cell-md、sm:cell-sm，而你CSS中写的选择器是.cell-lg，两者完全不匹配，Svelte自然判定这部分CSS没有被使用。
2. 即使你修正了类名匹配问题，Svelte的作用域CSS静态检测对带特殊字符（比如冒号）的类名、结合:nth-child这类伪类的组合选择器，也容易出现误判，会错误标记为未使用。

另外你现存的代码还有一个隐藏问题：自定义的.cell-lg这类规则没有包裹对应断点的媒体查询，就算Svelte不删除这些样式，也不会在对应屏幕尺寸下才生效，不符合你响应式调整的需求。

解决方案 #

推荐两种可直接落地的方案：

方案一：直接写带媒体查询的通用类规则（最省心） #

直接给网格单元加一个固定的通用类名，不用和Tailwind的响应式前缀绑定，绕开类名匹配问题：

1. 修改模板中元素的class属性，删除带前缀的cell类，添加固定类grid-cell：

<div class="border-r-[1px] border-b-[1px] border-work-with-us border-opacity-100 grid-cell">

2. 修改CSS部分，给不同断点的规则套上对应媒体查询：

.grid-cell:nth-child(2n) {
  border-right-width: 0;
}
@media (min-width: 768px) {
  .grid-cell:nth-child(3n) {
    border-right-width: 0;
  }
}
@media (min-width: 1024px) {
  .grid-cell:nth-child(4n) {
    border-right-width: 0;
  }
}

这种方案Svelte可以正常识别grid-cell类的使用，不会判定为未使用，也不需要额外处理特殊字符。

方案二：保留原写法，修正类名和作用域 #

如果一定要保留模板里的lg:cell-lg这类写法，需要转义CSS类名中的特殊字符，同时用:global()标记跳过Svelte的作用域检测：

/* 小屏规则 */
:global(.sm\:cell-sm):nth-child(2n) {
  border-right-width: 0;
}
/* 中屏规则 */
@media (min-width: 768px) {
  :global(.md\:cell-md):nth-child(3n) {
    border-right-width: 0;
  }
}
/* 大屏规则 */
@media (min-width: 1024px) {
  :global(.lg\:cell-lg):nth-child(4n) {
    border-right-width: 0;
  }
}

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