Tailwind CSS покорил мир веб-разработки ?️, но неправильные представления о его природе сохраняются. Во время недавнего обсуждения планирования системы дизайна я чуть не уронил чай ☕ (кофе не пью, извините), когда коллега случайно сравнил Tailwind CSS с Bootstrap и Materialize?. Это шокирующее открытие было похоже на открытие того, что моя кошка думает, что она собака! ??

Итак, возьми попкорн? когда я проясню ситуацию и раскрою истинную сущность Tailwind CSS!

Небольшое введение

В этой статье мы углубимся ?‍♂️ в то, что на самом деле представляет собой Tailwind CSS, исследуем его уникальный подход к стилизации и то, почему он отличается от традиционных фреймворков CSS. К концу вы поймете, почему сравнивать Tailwind CSS с Bootstrap или другими компонентными фреймворками — все равно, что сравнивать яблоки с апельсинами ??

Чем не является CSS Tailwind ❌

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

• Не библиотека компонентов: в отличие от Bootstrap или Materialize, Tailwind CSS не предоставляет готовые компоненты из коробки?
• Не зависит от дизайна: он не навязывает вашим проектам определенный визуальный стиль?
• Не просто еще один CSS-фреймворк: Хотя технически это CSS-фреймворк, подход, ориентированный на полезность, отличает его от традиционных фреймворков ?

И вот некоторые распространенные заблуждения:

• ? «CSS Tailwind похож на встроенные стили»: Нет, это не так. В отличие от встроенных стилей, Tailwind позволяет использовать расширенные функции, такие как псевдоклассы, медиа-запросы и анимацию. Он обеспечивает подход, ориентированный на утилиты, который приводит к меньшему количеству классов CSS по сравнению со встроенным стилем.
• ? «Вам не нужно знать CSS, чтобы использовать Tailwind»: это false. Глубокое понимание CSS имеет решающее значение для эффективного использования Tailwind CSS4. Хотя знание основ CSS упрощает многие аспекты стилизации, оно помогает понять, как работают служебные классы и как их настраивать при необходимости
• ? «CSS Tailwind нельзя настроить»: это дальше от истины. Фактически, он спроектирован так, чтобы быть очень расширяемым и настраиваемым

Теперь, когда мы развеяли некоторые заблуждения, давайте рассмотрим, что делает Tailwind CSS по-настоящему уникальным и почему он коренным образом меняет подход разработчиков к веб-стилю.

CSS-фреймворк, ориентированный на утилиты

По своей сути Tailwind CSS представляет собой ориентированную на полезность CSS-фреймворк. Это означает, что он предоставляет набор служебных классов низкого уровня, которые вы можете использовать для создания собственных проектов непосредственно в HTML. Вместо написания собственного CSS для каждого элемента вы применяете заранее определенные классы, которые обрабатывают определенные свойства стиля. Это как иметь швейцарский армейский нож? для вашего CSS!

Например, вместо написания:

.button {
  padding: 0.5rem 1rem;
  background-color: blue;
  color: white;
  border-radius: 0.25rem;
}

Вы можете использовать классы Tailwind в своем HTML:

Click me

Скрытая система дизайна

Хотя Tailwind не предоставляет готовые компоненты, он предлагает комплексную систему проектирования. Он поставляется с тщательно продуманным набором значений по умолчанию для цветов, интервалов, типографики и многого другого. Эти настройки по умолчанию можно настроить, что позволяет адаптировать Tailwind к конкретным потребностям вашего проекта.

Взгляните на эту пользовательскую конфигурацию:

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#4da6ff',
          DEFAULT: '#0066cc',
          dark: '#004080',
        },
        secondary: {
          light: '#ffb366',
          DEFAULT: '#ff8000',
          dark: '#cc6600',
        },
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
      },
      fontSize: {
        'xs': '.75rem',
        'sm': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
      borderRadius: {
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'full': '9999px',
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
      textColor: ['visited'],
    },
  },
}

Почему Tailwind CSS стоит особняком

Гибкость и настройка

В отличие от Bootstrap или Materialize, которые предоставляют набор самостоятельных компонентов, Tailwind предоставляет вам строительные блоки для создания собственных уникальных проектов. Такая гибкость дает больше творческой свободы и помогает избежать "стиля начальной загрузки", в который попадают многие веб-сайты.

Преимущества производительности

Подход, ориентированный на утилиты, может привести к уменьшению размеров CSS-файлов, особенно в сочетании со встроенной функцией очистки. Эта функция удаляет неиспользуемые стили в рабочей среде, в результате чего таблица стилей становится более компактной и производительной. Ваш сайт будет выглядеть так, как будто он находится на стероидах! ?

Усилитель опыта разработчика

Это значительно улучшает работу разработчиков за счет:

• Уменьшение переключения контекста: вы можете стилизовать элементы, не выходя из HTML. Больше не нужно жонглировать несколькими файлами! ?‍♂️
• Содействие единообразию: предопределенные классы обеспечивают единообразие интервалов, цветов и других элементов дизайна во всем проекте. Ваш дизайн будет гармоничен, как хорошо настроенный оркестр ?
• Ускорение разработки: имея под рукой служебные классы, вы можете быстро создавать прототипы и повторять проекты. Вы почувствуете, что обладаете сверхспособностями!⚡ А с помощью расширения vscode Tailwindcss Intellisense вы можете получить автодополнение и анализ для его классов, а также добавить пользовательские классы

И это обертка?

Tailwind CSS — это не просто еще один CSS-фреймворк. Предоставляя набор низкоуровневых служебных классов, он позволяет разработчикам создавать уникальные, эффективные и удобные в сопровождении проекты без ограничений традиционных фреймворков CSS.

Так что в следующий раз, когда кто-то сравнит Tailwind с Bootstrap, вы сможете объяснить, почему это сравнение не соответствует действительности и почему Tailwind может изменить правила игры, необходимые вашему проекту. Приятного кодирования! ??‍?