Tailwind + React: узоры настройки и дизайна

Вы можете найти весь исходный код для этого поста в начальном шаблоне Здесь Анкет

Не стесняйтесь Обратитесь в Twitter В любое время с вопросами.

Что такое Tailwind?

Вы, наверное, уже слышали о Tailwind, но если вы этого не сделали, это, по сути, это утилита CSS-структура и гораздо менее самоуверенная по сравнению с другими рамками CSS, такими как Bootstrap и Foundation. Согласно Tailwindcss.com , это описывается как:

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

На мой взгляд, это делает Taillide отличным вариантом для ваших проектов. Вы получаете преимущества быстрого развития, без самоуверенных стилей, которые вы в конечном итоге переопределяете.

Так что, если мы хотим использовать Tail With с React, так же просто, как просто включать лист стиля? Не совсем. Из -за того, как создан Tailwind, и некоторых оптимизаций, которые они имеют на месте (то есть очищение неиспользованных CSS), существует несколько дополнительных шагов, чтобы правильно настроить его в проекте React.

Получение настройки проекта

Чтобы начать, либо перейдите в свой собственный проект React, либо запустите новый с NPX Create-React-App Tailwind-React-App Анкет

Установка зависимостей

Далее, давайте установим пару зависимостей через npm i @fullhuman/postcss-purgecss postcss-cli tailwindcss-save-dev Анкет

Краткое объяснение каждой зависимости:

Fullhuman/Postcss-Purgecss – Используется для очистки неиспользованных CSS для создания наименьшего окончательного файла CSS. Если вы не очищаете неиспользованный CSS, Tailwind на самом деле более 2 МБ несжат.
postcss-cli – Tailwind – плагин PostCSS. Вам не нужно использовать PostCSS в качестве препроцессора, но в этом случае мы сделаем все возможное.
Tailwindcss – Библиотека и утилиты Tailwind

Создать файлы конфигурации

Теперь, когда у нас установлены зависимости, нам нужно создать пару файлов конфигурации.

Во -первых, создайте конфигурацию вашего ветра, запустив NPX Tailwind init В проекте корень. Вы можете обновить некоторую конфигурацию Tailwind здесь, если хотите.

Далее, создайте свою конфигурацию PostCSS, создав postcss.config.js Файл в корне проекта и добавление следующего контента:

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.js', './src/**/*.jsx', './public/**/*.html'],
  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
});

module.exports = {
  plugins: [
    require('tailwindcss'),
    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
  ],
};

В первой части нам требуется и настроить Purgecss Анкет Это требует двух частей. Первый – это список проницательных файлов, которые являются JS, JSX и HTML (вы также можете добавить и .tsx ) HTML требуется, чтобы базовые стили (например, body , html и т. Д.) Не получают очищение.

Вторая часть используется для определения функции экстрактора (то есть правил, для которых содержимое сохранения). Purgecss является наивным по своей природе, что означает, что он будет искать контент, который соответствует этому регулярному выбору в типах файлов, перечисленных выше. Это важно знать и будет пересматриваться, когда мы обсуждаем шаблоны ниже.

Импорт Tailwind CSS

Теперь, когда у нас установлены зависимости и настройка файлов конфигурации, мы можем фактически добавить в наше приложение файл CSS Tailwind. Для начала создайте Tailwind.css Файл в SRC/ Папка со следующими директивами Tailwind:

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

Это притягивает и собирает стили для нас автоматически, когда мы создаем нашулярный выход. Также полезно отметить, что этот файл, где мы могли бы добавить наши собственные индивидуальные утилиты, если захотите. Для получения дополнительной информации о добавлении новых утилит, Нажмите здесь Анкет

Наконец, давайте импортируем выходной файл (который мы создадим через сценарии сборки в следующем разделе) в нашем app.js Таким образом, он доступен во всем мире на протяжении всего нашего приложения.

import './tailwind.output.css';

Вам может потребоваться изменить путь, если ваш app.js не в корне /src Папка, так как именно здесь это будет выходить по умолчанию.

Настройка сценариев сборки

Последний шаг, чтобы получить работу Tailwind – создать пару сценариев быстрого сборки, чтобы гарантировать, что выходной файл будет создан. Давайте добавим следующее в наш раздел сценариев в Package.json :

"tailwind:build": "NODE_ENV=production postcss src/tailwind.css -o src/tailwind.output.css",
"tailwind:dev": "postcss src/tailwind.css -o src/tailwind.output.css",
"prestart": "npm run tailwind:dev",
"prebuild": "npm run tailwind:build",

Есть два отдельных сценариста с ветром, которые мы создали. Первый : build Один из них для производственных сборок (то есть запустите purgecss Мы определили выше), тогда как вторая – это сборка разработчиков, которая сохраняет полный индивидуальный ветер, так как мы хотим получить доступ ко всем стилям по мере развития.

Следующая часть – Prestart где мы запускаем сборку разработки до того, как уставились на сервер разработки React. Вы можете сделать еще один шаг и добавить скрипт часов, который проверяет изменения в Tailwind.css В Но я обнаружил, что дополнения/изменения в этот файл довольно редки, поэтому я просто перезагружаю сервер Dev, если это появится.

Наконец, последняя часть – это prebuild Сценарий, который запускает производство (очищенное) Сборка ветра, которая приведет к файлу CSS, который содержит только стили, которые мы фактически использовали в нашем приложении.

Вот и все! Теперь вы должны работать с Tailwind в вашем приложении React. Если вы хотите сделать еще один шаг, в следующем разделе я рассмотрю некоторые шаблоны дизайна и обычные Gotchas, когда работаете с Tailwind в React.

Шаблоны проектирования

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

Что нет Делать

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

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

Теперь, допустим, мы хотим условно изменить границу на красный, если где -то есть ошибка. Если у нас есть Ошибка Переменная состояния/поддержки, у нас может возникнуть соблазн сделать что -то вроде:

На первый взгляд, это выглядит правильно. На самом деле, это сделало бы правильные классы и хорошо работать в разработке. Однако, как только вы создаете производственную версию своего приложения, вы заметите, что эти стили отсутствуют, но почему это так? Как упоминалось ранее, Purgecss работает против нашей производственной сборки, чтобы создать наименьший возможный файл CSS Tailign. В нем просто рассматривается типы файлов, которые вы предоставили, и пытается найти контент, соответствующий регулярному выражению. В этом случае, когда он проверяет этот файл компонента, он не совпадает с граница-красный-500 или Border-Gray-300 Потому что они построены динамически. Вместо этого он встретится красный-500 и серый 300 и не работать, как предполагалось.

Итак, как мы это избегаем? Самый простой способ – всегда гарантировать, что при написании классов Taillide в вашем коде полное имя класса существует и не создано динамически. Поэтому, используя приведенный выше пример, мы получаем:

Теперь, когда Purgecss работает против этого файла, он будет держать граница-красный-500 и Border-Gray-300 , как это должно.

Давайте посмотрим на некоторые базовые шаблоны с ветром, которые мы можем использовать в нашем приложении сейчас, когда мы знаем, что не следует делать.

Основной шаблон

Паттерн, который я использовал на некоторое время, – это та, которая включает в себя определение всех ваших классов над компонентом в объекте с строками для каждого элемента.

Например, вот базовый компонент:

Используя приведенный выше шаблон, код компонента будет выглядеть как:

const classes = {
  wrapper: 'border-2 m-16 p-16',
  title: 'text-gray-800 text-xl text-center font-bold',
};

const BasicComponent = () => {
  return (
    
      Basic Component
    
  );
};

Этот базовый шаблон имеет пару хороших преимуществ:

Он сохраняет определение компонента в чистоте, особенно если есть несколько элементов или, если имена классов получают длинные
Это позволяет легко использовать занятия в нескольких местах. Кроме того, если вам нужно изменить стили, вы делаете это только в одном месте в компоненте.
Все классы полностью определены в файле, поэтому нет проблем с Purgecss
Вы получаете хороший обзор всех стилей для вашего компонента в одном аккуратном месте

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

Усовершенствованный шаблон

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

Например, вот более динамичный компонент:

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

const classes = {
  wrapper: 'border-2 m-16 p-16 text-center',
  title: 'text-gray-800 text-xl font-bold',
  description: (active) =>
    `my-6 ${active ? 'text-red-900 font-medium' : 'text-gray-800'}`,
  button: 'py-2 px-4 bg-gray-100 border-2 focus:outline-none',
  buttonActive: 'bg-gray-400',
};

const AdvancedComponent = () => {
  const [active, setActive] = useState(false);

  return (
    
      Advanced Component
      
        I change based on the button click state.
      
      
    
  );
};

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

Другой метод создания динамических классов при сохранении основного шаблона – это то, что было сделано с кнопка и Buttonactive классы В этом случае CLSX Модуль использовался для динамического добавления классов на основе условий. Classes.button Класс был добавлен без условий (базовые стили), однако Classes.buttonactive добавляется только если Активный правда. Этот метод также работает хорошо, когда у вас есть несколько условно добавленных классов к элементу, или если ваши классы просто получают немного вне рук, и вы хотите немного разбить их. Еще раз, Purgecss будет работать нормально с этим методом, так как базовые классы полностью определены.

Вывод

Я надеюсь, что это помогло вам работать с Taillide в вашем приложении React и даст вам некоторое вдохновение на то, как вы можете использовать его в своих компонентах таким образом, чтобы облегчить работу.

Если у вас есть какие -либо вопросы, предложения или сталкиваться с любыми проблемами, не стесняйтесь Обратитесь в Twitter Анкет

Оригинал: “https://dev.to/rfitz/tailwind-react-setup-and-design-patterns-f7o”