Ошибки при работе с tailwindcss

1. Использование модификатора !important чтобы перебить другие классы (стили).

   Использование !important в 99% не нужен. Только в крайних ситуациях, когда работаете со сторонними библиотеками и привычными способами не получается повысить силу селектора.

   Плохой код:

   className={cn(     'bg-slate-100',{     '!bg-slate-200': isActive, })}

   Хороший:

   className={cn('bg-slate-100', 'active:bg-slate-200')}

   На крайний случай, условное добавление классов:

     className={cn({     'bg-slate-100': !isActive,     '!bg-slate-200': isActive })}

2. Некорректная настройка или отсутствие корректных настроек в файле tailwind.config.js.

   Полная замена tailwind цветов:

   module.exports = {   theme: {     colors: {       customColor: '#1DA1F2',     },   }, };

   Расширение (добавление) новых цветов:

   module.exports = {   theme: {     extend: {       colors: {         customBlue: '#1DA1F2',         customGreen: '#10B981',       },     },   }, };

   Если заменяете стандартные шрифты, то заменяйте все:

   theme: {   fontFamily: {     sans: ['Roboto', 'sans-serif'], // Заменяем стандартный sans шрифт     serif: ['Merriweather', 'serif'], // Заменяем стандартный serif шрифт     mono: ['Fira Code', 'monospace'], // Заменяем стандартный моноширинный шрифт   }, }

   Также сюда можно отнести неумение переопределять переменные tailwind.

   Например, лучше в конфигурации заменить переменную для transition, время анимации, чем каждый раз дописывать класс duration-500.

   transitionDuration: {   DEFAULT: '500ms' }

3. Распространенное использование класса transition-all для переходов.

   Когда вы используете transition-all, браузер отслеживает и анимирует все изменяющиеся свойства, даже если они не требуют анимации. Это приводит к излишней нагрузке на рендеринг, так как браузеру приходится вычислять все возможные переходы, включая те, которые могут оказаться тяжёлыми для системы, например, изменения width, height, left, top и других свойств, влияющих на перерисовку и перерасчёт макета.

   Либо указывайте конкретные свойства которые необходимо «анимировать», либо применяйте класс transition, в нем.

4. Одержимость произвольными значениями

   <div class="bg-[#3498db]">Content</div> <div class="p-[20px]">Content</div>

   Лучше выносить в tailwind.config.js, и иметь стабильную дизайн систему, лучше иметь ограниченные стили, чем много.

   extend: {   spacing: {     '20': '20px',   },   colors: {     // Добавление кастомного цвета для фона     'customBlue': '#3498db',   }, },  <div class="bg-customBlue">Content</div> <div class="p-20">Content</div>

   Но лучше давать адекватные название для цветов, а то customBlue плохое. Можно заменить стандартный.

   extend: {   colors: {     blue: {       500: '#3498db',  // Заменяем конкретный оттенок       600: '#2980b9',     },   }, },

5. Некорректное использование breakpoints

   Забывание базового стиля для мобильных устройств: Важно помнить, что в Tailwind CSS базовые стили применяются к мобильным устройствам по умолчанию (для экранов меньше sm). Если вы забыли указать базовый стиль, он может быть перезаписан на более крупных экранах.

   <div class="sm:bg-red-500 md:bg-blue-500 lg:bg-green-500">Content</div>

   Проблема: Если экран устройства меньше sm, то не будет применяться никакого фона, так как для мобильных устройств (по умолчанию) не задано никакое значение для фона.

   <div class="bg-gray-200 sm:bg-red-500 md:bg-blue-500 lg:bg-green-500">Content</div>

6. Извлечение класса @apply на глобальном уровне (создание собственных стилей, взамен изолирования на уровне компонента)

   Желательно применять напрямую к компоненту, благо у нас есть компоненты в react или vue.

   @layer components {   .btn-primary {     @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;   } }

   Разработчики tailwindcss также рекомендуют оставлять стили в самих элементах, а не создавать классы через @apply, это громоздко, но зато не нужно идти и править там.

   Но также видел проекты, где на уровне компонентов использование @apply и ф-ции реализующие подход css in js.

Выводы

Если обобщить, то проблема кроется в плохом знании css и документации tailwindcss. А как часто бывает, нанимают только начинающих разработчиков компании чтобы сэкономить денег. Вроде бы получают как по макету, но код получается грязным. В добавок к этому добавляется проблема с семантической версткой, доступностью и сломанной логикой компонентов.

Делитесь своими плохими практиками, как не стоит или как стоит. Возможно у вас были открытия, которые вам упростили жизнь.