Utility-first фреймворки: Tailwind CSS

Tailwind CSS представляет собой utility-first CSS фреймворк, который предлагает использовать классы низкого уровня для построения интерфейсов. Вместо создания кастомных CSS-правил для каждого элемента применяется набор готовых утилит, таких как p-4, text-center, bg-blue-500, что позволяет быстро и предсказуемо формировать визуальное оформление компонентов.

Utility-first подход отличается от традиционного написания CSS:

  • Каждый класс выполняет одну конкретную функцию (отступ, цвет, размер шрифта, позиционирование).
  • Отсутствие глобальных селекторов минимизирует конфликты стилей.
  • Комбинирование множества маленьких классов позволяет создавать сложные интерфейсы без написания кастомного CSS.

Интеграция Tailwind с Preact

Tailwind CSS полностью совместим с Preact, благодаря возможности использовать классы прямо в JSX. Для интеграции обычно используется PostCSS и пакет tailwindcss.

Пример базовой конфигурации:

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
// index.js
import { h, render } from 'preact';
import './index.css';
import App from './App';

render(<App />, document.getElementById('root'));

index.css должен содержать директивы Tailwind:

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

Использование утилит Tailwind в компонентах Preact

Компоненты Preact используют JSX, что позволяет применять утилиты Tailwind напрямую к элементам:

import { h } from 'preact';

const Button = () => (
  <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700">
    Кнопка
  </button>
);

export default Button;

Разбор классов:

  • bg-blue-500 — задает цвет фона.
  • text-white — цвет текста.
  • font-bold — жирный шрифт.
  • py-2 px-4 — внутренние отступы по вертикали и горизонтали.
  • rounded — скругленные углы.
  • hover:bg-blue-700 — изменение цвета при наведении.

Составные классы и сокращения

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

  • m-4 — отступ со всех сторон.
  • mx-auto — горизонтальное центрирование.
  • flex, flex-col, justify-between, items-center — управление flex-контейнерами.
  • grid, grid-cols-3, gap-4 — работа с сеткой.

Пример компонента с flex и grid:

const CardList = ({ items }) => (
  <div class="grid grid-cols-3 gap-6">
    {items.map(item => (
      <div class="bg-white shadow-md rounded p-4 flex flex-col justify-between">
        <h2 class="text-xl font-semibold">{item.title}</h2>
        <p class="text-gray-600">{item.description}</p>
        <button class="mt-4 bg-green-500 text-white py-2 rounded hover:bg-green-700">
          Подробнее
        </button>
      </div>
    ))}
  </div>
);

Мобильная адаптивность и медиазапросы

Tailwind предоставляет удобную систему responsive-утилит:

  • sm:, md:, lg:, xl:, 2xl: — префиксы для разных размеров экранов.
  • Можно комбинировать с любыми классами для изменения стилей на разных устройствах.

Пример адаптивного компонента:

<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gray-100">
  Контент с адаптивными отступами
</div>

Темизация и расширение стилей

Tailwind позволяет настраивать тему проекта, добавляя собственные цвета, размеры, шрифты:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1c64f2',
        accent: '#f43f5e',
      },
      spacing: {
        72: '18rem',
        84: '21rem',
      },
    },
  },
};

Теперь можно использовать классы bg-brand или p-72 прямо в JSX.

Псевдоклассы и состояния

Tailwind поддерживает работу с псевдоклассами и состояниями:

  • hover:, focus:, active:, disabled:.
  • first:, last:, odd:, even: — для выборки элементов в списке.
  • group и group-hover — позволяют управлять состояниями дочерних элементов через родителя.

Пример:

<div class="group p-4 border rounded">
  <p class="text-gray-700 group-hover:text-red-500">
    Текст меняет цвет при наведении на родителя
  </p>
</div>

Производительность и PurgeCSS

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

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  // ...
};

Это существенно снижает размер итогового CSS.

Плагины Tailwind

Фреймворк поддерживает подключение плагинов, расширяющих стандартные возможности:

  • @tailwindcss/forms — стилизация форм.
  • @tailwindcss/typography — красивые типографические стили.
  • @tailwindcss/aspect-ratio — управление соотношением сторон элементов.
  • Можно создавать собственные плагины для повторного использования утилит.

Пример подключения:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
};

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

Оглавление