Блог

Главная - Вопросы по программированию - Стройный «неиспользуемый» CSS не компилируется

Стройный «неиспользуемый» CSS не компилируется

#css #svelte #tailwind-css

Вопрос:

Я создаю сетку текста с небольшими изменениями границ в зависимости от 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>

Комментарии:

1. Полное имя класса lg:cell-lg -нет cell-lg . Вероятно, вам следует вместо этого использовать другой класс и медиа-запросы.

2. Есть ли способ использовать медиа-запросы tailwind для пользовательских классов?

3. Вы можете либо воспроизвести их в обычном CSS (используя те же измерения), либо создать пользовательский класс с точками останова в конфигурации tailwind. Я никогда не использовал попутный ветер со Стройностью, так что больше ничем не могу вам помочь

Ответ №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;
}
Метки: