Ошибки при работе с tailwindcss14.11.2024 08:31

Использование модификатора ! 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
})}

Некорректная настройка или отсутствие корректных настроек в файле 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'
}

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

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

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

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

Content
Content

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

extend: {
  spacing: {
    '20': '20px',
  },
  colors: {
    // Добавление кастомного цвета для фона
    'customBlue': '#3498db',
  },
},

Content
Content

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

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

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

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

Content

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

Content

Извлечение класса @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.