Блог

Главная - Вопросы по программированию - поле элемента в определенных точках останова не работает в Tailwind

поле элемента в определенных точках останова не работает в Tailwind

#css #plugins #themes #next.js #tailwind-css

#css #Плагины #темы #next.js #tailwind-css

Вопрос:

Я пытался установить поле div элемента в определенных точках останова, добавив {screen}: prefix но это не сработает. То, что я пробовал, приведено ниже;

 <div className={'flex justify-center'}>
  <div className={'w-full my-8 sm:my-20 md:my-48'}>
    <div {...props}>
      {children}
    </div>
  </div>
</div>

В режиме проверки я смог определить, что работает только my-8 класс.

введите описание изображения здесь

Все классы Tailwind работают хорошо, и flex для адаптивных также работает, но поле (отступ) для адаптивных не работает. Я использую Next.js и Tailwind CSS.

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

1. Итак, вы пробовали другие вещи, такие как sm:bg-red-500 , и это сработало, но поля и отступы — нет? Возможно, ваша настройка PurgeCss неверна?

2. Спасибо за ваш комментарий. Я нашел ответ самостоятельно.

Ответ №1:

Извините, но я понял это сам. Это из-за конфигурации tailwind.

Поскольку это не проект с нуля, у меня не было возможности проверить конфигурацию.

Итак, я понял это, изменив margin variant на:

   // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     margin: ['hover'],
      margin: ['responsive', 'hover'],
    }
  }

ссылка:
https://tailwindcss.com/docs/margin#responsive-and-pseudo-class-variants

ОБНОВЛЕНИЕ 11/2021

В ноябре 2021 года Tailwind выпустила версию 3.0, и в ней есть некоторые критические изменения.

Одно из изменений, вы можете удалить variants раздел из вашего tailwind.config.js файла.

Ссылка:https://tailwindcss.com/docs/upgrade-guide#remove-variant-configuration