news.shamcode.ru | Tailwind не только для MVP

Всем привет!

Обычно Tailwind используют для каких-то MVP/админок/не очень больших проектов, но мне кажется, что Tailwind, имеет место быть в средних и крупных проектах. Большинство его минусы решаемы, а плюсы чертовски хороши :)

В этой статье я распишу его плюсы и минусы и как можно минусы превратить в плюсы.

Сначала, коротко о том, что такое Tailwind

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

На главной Tailwind можно прочитать вот это - Rapidly build modern websites without ever leaving your HTML.Что дословно можно перевести как - Быстро создавай вебсайты, не отходя от HTML.

Выглядит как-то так:

Перейдем к плюсам

Плюс который вытекает из заголовка на главной — нам крайне редко нужно обращаться к css файлам, почти все стили мы храним в самой разметке это сильно ускоряет скорость разработки и позволяет не терять фокус при верстке(не нужно постоянно свитчиться между css и файлом с разметкой)
Удобный подход к адаптивной верстке, для того чтобы указать определенное свойство для другого разрешения тебе нужно поставить определенный префикс который ты заранее можешь определить в конфигурационном файле, например вот так просто мы можем сделать карточку по горизонтали на мобильном устройстве(отлично работает, если у вас много breakpoints).

<template>
	<div class="flex flex-col gap-2 sm:flex-row">
		<h2>Responsive card</h2>
		<p>Some context</p>
	</div>
</template>

Темная тема поддерживается из коробки, все что вам нужно для того, чтобы ее использовать - прописать префикс - dark:

<template>
	<div class="bg-[#000000] dark:bg-[#ffffff]">
		<h2>Responsive card</h2>
		<p>Some context</p>
	</div>
</template>

Больше не нужно придумывать названия классов, для твоих элементов, хоть сейчас это и не является большой проблемой, так как есть например css-modules, но даже там нужно давать осмысленные имена и избегать коллизий этих имен.
Плагины и расширения, которые есть для Tailwind, вот например статья с 50 таковыми - тык
Удобная кастомизация, с помощью tailwind.config, это позволяет очень удобно интегрироваться с дизайн системой(если у вас таковая имеется). Единая система в одном месте, которая может быть пошаренной между большим количеством проектов одновременно(+ к хорошей масштабируемости).

theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },

Одни и те же css свойства импортируются всего 1 раз
Легкая интеграция с различными фреймворками React, Vue, etc…

Можно совмещать с обычным CSS(приятно, когда проект начинает разрастаться), вас никто не ограничивает и не говорит, что нужно писать только на Tailwind, так что вы можете писать что-то такое:

.someClass {
	background: #000000;

	@apply w-10 h-10 rounded-10; 
}

6.5 миллионов скачиваний за последнюю неделю на npm(довольно большое community), у vue например всего 4 миллиона.

В выходном css файле у вас не будут присутствовать классы, которые реально не используются в разметке. Чистота и минимизация. Причем это относится и к тем классам, которые добавляются скриптами. Однако если вы хотите, чтобы некий класс всегда присутствовал на выходе, то вы и это можете сделать, объявив его вне директивы @ layer (отличный поинт от комментатора :) )

А какие минусы ?

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

Существенно разрастается разметка и ее становится тяжело поддерживать
Затруднена навигация с помощью devtools. Не так хорошо работает, как с классами
Отсутствует переиспользуемость

Сейчас я расскажу как победить эти минусы

Существенно разрастается разметка и ее становится тяжело поддерживать

Картинка которая вселяет ужас(самая частая картинка в пользу того, что не нужно использовать Tailwind в своих проектах)

Не знаю, может кто и пишет так код с помощью Tailwind, но на мой взгляд это еще то извращение.

Я не поленился и переписал ее(да, мне нечем заняться) в нормальном стиле на Tailwind и написал тоже самое на обычный CSS.

Вот два получившихся компонента, по максимуму вынес в обоих случаях общее и получил следующий код:

TailwindNotation.vue

<template>
  <section class="flex justify-center mb-[140px]">
    <div
      class="wrapper"
    >
      <div
        class="block-1 relative bg6 bg-cover bg-center w-full max-w-[1440px] p-[64x] pc:p-[80px] text-white"
      ></div>
      <div
        class="block-2 "
      ></div>
      <div
        class="block-3"
      ></div>
    </div>
  </section>
</template>


<style lang="scss" scoped>
.wrapper {
  &::before, &::after {
    @apply content-[''] absolute
    h-[50px] pc:h-[90px] w-[50px] pc:w-[90px]
    top-[24px] pc:top-[30px]
    bg-[url('*~/assets/images/cta_decoration.png')] bg-cover
  }

  &::before {
    @apply cleft-[24x] pc:left-[30px]
  }

  &::after {
    @apply right-[24px] pc:right-[30px]
  }
}


.block-1 {
  &::before, &::after {
    @apply content-[''] absolute
    w-[calc(100%__164px)] pc:w-[calc(100%_-_260px)]
    left-[82px] pc:left-[130px]
    border-t-2 pc:border-t-4 border-brown3
  }

  &::before {
    @apply top-[32px] pc:top-[40px]
  }

  &::after {
    @apply bottom-[32px] pc:bottom-[40px]
  }

}

.block-2 {
  &::before, &::after {
    @apply absolute
    h-[calc(100%_-_164px)] pc:h-[calc(100%_-_260px)]
    top-[82px] pc:top-[130px]
    border-1-2 pc:border-l-4 border-brown3
  }

  &::before {
    @apply content-[''] 
    left-[32px] pc:left-[40px]
  }

  &::after {
    @apply content-[1] 
    right-[32px] pc:right-[40px]
  }
}

.block-3 {
  &::before, &::after {
    @apply content-[''] absolute
    w-[50px] h-[50px] pc:w-[90px] pc:h-[90px]
    bottom-[24px] pc:bottom-[30px]
    bg-[urt('~/assets/images/cta_decoration.png')] bg-cover
    rotate-180
  }
  
  &::before {
    @apply left-[24x] pc:left-[30px]
    scale-x-[-1]
  }

  &::after {
    @apply right-[24px] pc:right-[30px]
  }
}
</style>

CSSNotation.vue

<template>
  <section class="section">
    <div
      class="wrapper"
    >
      <div
        class="block-1"
      ></div>
      <div
        class="block-2 "
      ></div>
      <div
        class="block-3"
      ></div>
    </div>
  </section>
</template>


<style lang="scss" scoped>
.section {
  display: flex;
  justify-content: center;
  margin-bottom: 140px;
}

.wrapper {
  position: relative;
  width: 100%;
  color: #ffffff;
  background-position: center;
  background-size: cover;
  max-width: 1440px;
  padding: 64px;
  @media (max-width: 1440px) {
    padding: 80px;
  }

  &::before, &::after {
    content: '';
    position: absolute;
    height: 50px;
    width: 50px;
    top: 24px;
    background: url('*~/assets/images/cta_decoration.png');
    background-size: cover;
    @media (max-width: 1440px) {
      height: 90px;
      width: 90px;
      top: 30px;
    }
  }

  &::before {
    left: 24px;
    @media (max-width: 1440px) {
      left: 30px;
    }
  }

  &::after {
    right: 24px;
    @media (max-width: 1440px) {
      right: 30px;
    }
  }
}


.block-1 {
  &::before, &::after {
    position: absolute;
    width: calc(100% - 164px);
    top: 32px;
    border-top-width: 2px;
    border-color: brown;
    left: 82px;
    @media (max-width: 1440px) {
      width: calc(100% - 260px);
      left: 130px;
      top: 40px;
      border-top-width: 4px;
    }
  }

  &::before {
    content: '';
  }

  &::after {
    content: '1';
  }
}

.block-2 {
  &::before, &::after {
    position: absolute;
    width: calc(100% - 164px);
    top: 32px;
    border-top-width: 2px;
    border-color: brown;
    @media (max-width: 1440px) {
      width: calc(100% - 260px);
      top: 40px;
      border-top-width: 4px;
    }
  }

  &::before {
    left: 32px;
    content: '';
    @media (max-width: 1440px) {
      left: 40px;
    }
  }

  &::after {
    right: 32px;
    content: '1';
    @media (max-width: 1440px) {
      right: 40px;
    }
  }
}

.block-3 {
  &::before, &::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 24px;
    border-top-width: 2px;
    border-color: brown;
    transform: rotate(180deg) scaleX(-1);
    background: url('*~/assets/images/cta_decoration.png');
    background-size: cover;
    @media (max-width: 1440px) {
      width: 90px;
      height: 90px;
      bottom: 30px;
    }
  }

  &::before {
    left: 24px;
    @media (max-width: 1440px) {
      left: 30px;
    }
  }

  &::after {
    right: 24px;
    @media (max-width: 1440px) {
      right: 32px;
    }
  }
}

</style>

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

В итоге при таком подходе мы получили, что у нас нет портянки классов в разметке, но при этом и css файл у нас получился компактным — 75 строк с использование Tailwind и 140 строк с использованием обычных стилей, разница почти в 2 раза.

И в целом при высокой декомпозиции кода, у вас не должно получаться больше 5-8 свойств на элемент, что является довольно читаемым, а если у вас больше свойств, то на помощь приходит apply

Навигация с помощью devtools не так хорошо работает, как с классами с хорошим неймингом.

Это проблему можно решить многими способами, я опишу 2

Использование Vue DevTools/React DevTools и хорошее разделение на компоненты

Добавление дата атрибутов и навигация с помощью них, например

<template>
	<div data-id="responsive-card" class="bg-[#000000] dark:bg-[#ffffff]">
		<h2>Responsive card</h2>
		<p>Some context</p>
	</div>
</template>

Навигация с помощью селектора по data атрибуту

Отсутствует переиспользуемость.

С помощью директивы apply, можно сделать как в коде ниже и получить переиспользуемый класс с использованием Tailwind классов

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

И самый главный наш инструмент - tailwind.config.js и пример переиспользуемых цветов

theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
}

Так почему же Tailwind не только для MVP

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

Выбор за вами!

А напоследок оставлю здесь милого котика для хорошего настроения

Если статья показалась вам интересной, то у меня есть Тг-канал, где я пишу про новые технологии во фронте, делюсь хорошими книжками и интересными статьями других авторов.