Добавление новых утилит

Хотя Tailwind предоставляет довольно полный набор служебных классов «из коробки», вы можете столкнуться с ситуациями, когда вам нужно добавить несколько собственных.

Выбор лучшего способа расширения фреймворка может парализовать, поэтому вот несколько передовых практик, которые помогут вам добавить свои собственные утилиты наиболее идиоматическим способом.

Использование CSS

Самый простой способ добавить свои собственные утилиты в Tailwind - просто добавить их в свой CSS.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .scroll-snap-none {
    scroll-snap-type: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x;
  }
  .scroll-snap-y {
    scroll-snap-type: y;
  }
}

Используя директиву @layer, Tailwind автоматически перемещает эти стили в то же место, что и утилиты @tailwind utilities, чтобы избежать непреднамеренных проблем со специфичностью.

Использование директивы @layer также проинструктирует Tailwind учитывать эти стили для очистки при очистке уровня utilities. Прочтите нашу документацию по оптимизации для продакшена для получения более подробной информации.

Создание адаптивных вариантов

Если вы хотите сгенерировать адаптивные варианты своих собственных утилит на основе контрольных точек, определенных в Вашем файле tailwind.config.js, заключите свои утилиты в директиву @variants и добавьте responsive в список вариантов:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants responsive {
    .scroll-snap-none {
      scroll-snap-type: none;
    }
    .scroll-snap-x {
      scroll-snap-type: x;
    }
    .scroll-snap-y {
      scroll-snap-type: y;
    }
  }
}

Tailwind автоматически сгенерирует версии с префиксом каждой пользовательской утилиты, которые вы можете использовать для условного применения этих стилей в разных контрольных точках:

<!-- Используйте по умолчанию `scroll-snap-type: none`, затем используйте `scroll-snap-type: x` на средних экранах и выше -->
<div class="scroll-snap-none md:scroll-snap-x"></div>

Узнайте больше об адаптивных утилитах в документации по адаптивному дизайну.

Создание вариантов темного режима

Если вы хотите сгенерировать варианты темного режима своих собственных утилит, сначала убедитесь, что для параметра darkMode установлено значение media или class в файле tailwind.config.js:

// tailwind.config.js
module.exports = {
  darkMode: 'media'
  // ...
}

Затем оберните Ваши утилиты в директиву @variants и добавьте dark в список вариантов:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants dark {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

Tailwind автоматически генерирует префиксные версии каждой пользовательской утилиты, которую вы можете использовать для условного применения этих стилей в разных состояниях:

<div class="filter-grayscale dark:filter-none"></div>

Узнайте больше об утилитах темного режима в документации темного режима.

Создание вариантов состояния

Если вы хотите создать варианты состояния для Ваших собственных утилит, заключите свои утилиты в директиву @variants и перечислите варианты, которые вы хотите включить :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

<div class="filter-grayscale hover:filter-none"></div>

Варианты состояний генерируются в том же порядке, в котором вы указываете их в директиве @variants, поэтому, если вы хотите, чтобы один вариант имел приоритет над другим, убедитесь, что вы указали последним:

/* Фокус будет иметь приоритет над наведением курсора */
@variants hover, focus {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

/* Наведение будет иметь приоритет над фокусом */
@variants focus, hover {
  .filter-grayscale {
    filter: grayscale(100%);
  }
  /* ... */
}

Дополнительные сведения о вариантах состояния смотрите в документации вариантов состояния.

Использование плагина

Помимо добавления новых служебных классов непосредственно в Ваши файлы CSS, вы также можете добавить утилиты в Tailwind, написав свой собственный плагин:

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      const newUtilities = {
        '.filter-none': {
          filter: 'none',
        },
        '.filter-grayscale': {
          filter: 'grayscale(100%)',
        },
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    })
  ]
}

Это может быть хорошим выбором, если вы хотите опубликовать свои пользовательские утилиты в виде библиотеки или упростить их совместное использование в нескольких проектах.