Svelte“未使用”的 CSS 未编译答案

【问题标题】：Svelte "Unused" CSS not compilingSvelte“未使用”的 CSS 未编译
【发布时间】：2021-09-08 22:04:54
【问题描述】：

我正在创建一个文本网格，其边框根据第 n 个子项（根据屏幕大小确定）略有变化。但是，svelte 将这些称为未使用的 css，即使它们已定义。出现此类错误的原因可能是什么？

    {#each workWithUs as item, i}
                <div
                    class="border-r-[1px] border-b-[1px] border-work-with-us border-opacity-100 lg:cell-lg md:cell-md sm:cell-sm ">
                    <div class="p-5 m-5">
                        {#if i > 0}
                            <span class="dot mb-[2px]" />
                            <span class="ml-2">{item}</span>
                        {:else}
                            <span class="text-2xl font-medium">{item}</span>
                        {/if}
                    </div>
                </div>
    {/each}

<style>
    .dot {
        height: 7px;
        width: 7px;
        background-color: #67c529;
        border-radius: 50%;
        display: inline-block;
    }

    .cell-lg:nth-child(4n) { //unused css error here
        border-right-width: 0;
    }

    .cell-md:nth-child(3n) { //unused css error here
        border-right-width: 0;
    }

    .cell-sm:nth-child(2n) { //unused css error here
        border-right-width: 0;
    }
</style>

【问题讨论】：

类的全名是lg:cell-lg，而不是cell-lg。您可能应该改用不同的类和媒体查询。
有没有办法为自定义类使用顺风媒体查询？
您可以在纯 CSS 中重现它们（使用相同的测量值），也可以使用 tailwind 配置中的断点创建自定义类。我从来没有在 Svelte 上使用过顺风，所以我无能为力了

标签： css svelte tailwind-css

【解决方案1】：

您没有在 CSS 选择器中定位正确的类。它们需要写成如下：

.lg\:cell-lg:nth-child(4n) { 
    border-right-width: 0;
}

.md\:cell-md:nth-child(3n) { 
    border-right-width: 0;
}

.sm\:cell-sm:nth-child(2n) { 
    border-right-width: 0;
}

【讨论】：