В этом руководстве показано, как создать
Вы можете просмотреть демонстрацию
Предпосылки
Прежде чем мы начнем, вам необходимо установить Node.js и npm. Если у вас установлен Node.js, то у вас будет установлен и npm.
Чтобы проверить, установлен ли Node, выполните в командной строке следующее:
node -v
Вы должны увидеть версию. Сделайте то же самое для npm:
npm -v
Следует отметить, что для Tailwind CSS требуется Node.js версии 12.13.0 или выше.
Если вы получаете сообщение об ошибке, вам необходимо установить Node. Вы можете следовать инструкциям по установке на сайте Node, а можете следовать нашей статье «Установка нескольких версий Node.js с помощью nvm „.
Настройка React и Tailwind CSS
Примечание. Если вы не знакомы с созданием приложения React, сначала ознакомьтесь с разделом „Создание приложения React: быстрая подготовка проектов React „.
Сначала создайте проект React с
npx
Затем измените каталог на созданный проект:
cd
Далее мы установим зависимости, необходимые для Tailwind CSS:
npm install -D tailwindcss@npm: @tailwindcss/
Мы устанавливаем Tailwind CSS со сборкой, совместимой с PostCSS 7, так как приложение Create React (или CRA) не поддерживает PostCSS 8 на момент написания этой статьи. Мы также устанавливаем autoprefixer, так как он требуется для Tailwind CSS после версии 2.0.
Настройка КРАКО
Обычно для настройки CRA необходимо запускать
Вот здесь -то и вступает в действие функция Create React App Configuration Override (или CRACO). CRACO — это библиотека, которая добавляет простой уровень конфигурации в CRA. Вместо того, чтобы выбрасывать все конфигурации внутри CRA в свой проект — например, просто для того, чтобы добавить некоторую конфигурацию в Webpack — все новые конфигурации или изменения в исходной конфигурации будут помещаться в новый файл craco.config.js. CRACO позволяет вам настроить CRA, чтобы получить максимальную отдачу от него без хлопот.
Нам нужен CRACO здесь, чтобы переопределить конфигурации PostCSS и добавить tailwindcssплагин. Итак, давайте сначала установим его:
npm install @craco/craco
При использовании CRA сценарии package.jsonвыглядят следующим образом:
„scripts“: {
„start“: „
„build“: „
„test“: „
„eject“: „
}
Поскольку мы используем CRACO для того, что мы не можем делать с CRA по умолчанию, нам нужно изменить сценарии, чтобы использовать CRACO для сборки проекта или запуска его в разработке:
„scripts“: {
„start“: „craco start“,
„build“: „craco build“,
„test“: „craco test“,
„eject“: „
},
Мы заменили
Далее создайте конфигурационный файл CRACO.config.jsв корне проекта:
module.exports = {
style: {
postcss: {
plugins: [
require ('tailwindcss’),
require ('autoprefixer’),
],
},
},
}
Этот файл конфигурации добавляет плагины tailwindcssи в файлы.autoprefixerpostcss
Теперь сгенерируем файл конфигурации для Tailwind CSS:
npx tailwindcss init
Примечание. Если вы используете Node.js v14, сообщается о проблеме, связанной с ошибкой, возникающей при выполнении этой команды, которая гласит: „Не удается найти модуль „autoprefixer““. Обновление до Node.js v15 должно работать, но если вы не можете этого сделать, воспользуйтесь одним из обходных путей здесь.
Это создаст файл tailwind.config.jsв корне проекта. Он будет иметь следующее содержание:
module.exports = {
purge: [],
darkMode: false, // or 'media’ or 'class’
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Вот что означает каждый из ключей конфигурации:
purge: это используется для указания файлов, которые Tailwind CSS должен сканировать и видеть, какие классы Tailwind CSS используются, чтобы он мог удалить все неиспользуемые стили и классы в рабочей среде.
darkMode: это определяет поведение темного режима в вашем проекте. Значение может быть media— означает, что стиль темного режима будет применяться на основе
theme: это можно использовать для изменения цветовой палитры темы, шрифтов, точек останова и многого другого. Позже в этом руководстве мы увидим, как внести изменения в тему.
variants: это позволяет вам применять дополнительные варианты к основным плагинам Tailwind CSS. Мы увидим, как это работает позже в учебнике.
plugins: раздел для добавления плагинов, которые могут добавлять дополнительные служебные классы, пользовательские варианты, базовые стили и многое другое.
Сейчас мы просто внесем два изменения.
purge: [“. /src/**/*. {js, jsx, ts, tsx}“, „. /public/index.html“],
Это указывает Tailwind CSS просмотреть все файлы, и в jsкаталоге jsx, tsа также файл, чтобы выяснить, какие классы будут использоваться из Tailwind CSS, и удалить все неиспользуемые классы.tsxsrcpublic/index.html
Второе изменение коснется темного режима:
darkMode: „media“, // or false or 'class’
Для простоты в этом руководстве мы сохраним темный режим только в зависимости от предпочтений ОС пользователя.
Последним шагом в настройке нашего проекта React с помощью Tailwind CSS является включение некоторых стилей Tailwind CSS в файлы src/index.css. Замените содержимое этого файла следующим:
@tailwind base;
@tailwind components;
@tailwind utilities;
Директива @tailwindв основном импортирует стили в файлы index.css. И по умолчанию CRA импортирует src/index.cssв src/index.js:
import '. /index.css’;
Это означает, что стили Tailwind CSS будут применяться в нашем проекте React, и мы готовы приступить к созданию красивого
Общие сведения об утилитах и вариантах CSS Tailwind
Прежде чем приступить к кодированию, давайте разберемся, что такое служебные классы и варианты Tailwind CSS. Tailwind CSS разработан, чтобы упростить стилизацию компонентов и помочь вам сосредоточиться на создании повторно используемых компонентов. Вспомогательные классы — это широкий спектр классов, которые позволяют вам стилизовать ваш компонент любым способом, который вы можете придумать, без написания кода CSS.
Например, чтобы стилизовать
div {
border: 1px solid #f00;
color: #fff;
}
Используя Tailwind CSS, вы можете сделать это, просто используя служебные классы:
Вот что означает каждый класс в этом примере:
border: устанавливает ширину границы в 1 пиксель
Есть много других классов, которые вы можете использовать, с разными оттенками цветов, что упрощает создание тем. Используя служебные классы, вам вообще редко нужно писать
Хорошо, но как насчет
Вот тогда и появляются варианты. Варианты позволяют добавлять стили к элементам на основе точек останова устройства, состояний элементов или того, включен ли темный режим или нет.
Итак, ранее вы могли сделать это, чтобы изменить ширину элемента в зависимости от размера устройства:
div {
width: 50%;
}
@media screen and (
div {
width: 80%;
}
}
@media screen and (
div {
width: 100%
}
}
С помощью Tailwind CSS это можно сделать следующим образом:
Это применяет w−1/2класс (что означает width: 50%), когда
Это определенно делает утомительную работу, которую вы должны выполнять в каждом проекте, проще и быстрее. Поначалу это может показаться запутанным, но когда вы начнете вникать в это больше, вы поймете, что использование служебных классов и вариантов становится второй натурой.
Подробнее о настройке Tailwind можно прочитать в официальной документации проекта.
Реализация наших компонентов
Вернуться на наш сайт. Мы создаем простой
Перейдите к конечной точке продуктов и скопируйте ответ. Затем создайте файл src/data/products.jsonи вставьте в него ответ. Это должен быть массив объектов, похожий на этот:
{
„id“: 1,
„title“: „Fjallraven — Foldsack No. 1 Backpack, Fits 15 Laptops“,
„price“: 109.95,
„description“: „Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday“,
„category“: „men’s clothing“,
«image“: «https: //fakestoreapi.com/img/81fPKd−2AYL. _AC_SL1500_.jpg»
}
Начнем с реализации Productкомпонента. Этот компонент будет компонентом карты, который показывает информацию о продукте. Создать src/components/Product.jsсо следующим содержимым:
function Product ({product: {title, price, description, category, image}}) {
return (
<div style={{backgroundImage: `url (${image}) `}}>
{title.substr (0, 50) }
{category}
{price}$
) ;
}
export default Product;
Как видите, Productкомпонент просто показывает детали продукта. На данный момент мы не добавили никаких классов для стилей.
Затем перейдите src/App.jsи измените содержимое на следующее:
import «. /App.css»;
import Product from «. /components/Product»;
import products from «. /data/products.json»;
function App () {
return (
{products.map ((product) => (
))}
) ;
}
export default App;
Здесь мы импортируем products.jsonфайл как products. Затем мы зацикливаемся productsи отображаем каждый продукт, используя Productкомпонент, который мы создали ранее. Опять же, обратите внимание, что мы не добавили никаких классов для стилей.
Теперь запустим сервер. Выполните следующую команду:
npm start
Вы увидите, что это просто куча текста, но никакого стиля.
Нет стиля
Добавление цвета фона
Давайте начнем добавлять некоторые стили.
Цвета по умолчанию могут быть white, black, gray, red, blue, green, yellow, orange, indigo, purpleи pink. Числовая шкала определяет оттенок цвета, где 50самый светлый оттенок, а 900самый темный. Например, если вы хотите, чтобы цвет фона был
На нашем
return (
{products.map ((product) => (
))}
) ;
Если вы сейчас проверите
Изменение ширины контента
Следующее, что мы собираемся сделать, это изменить ширину содержимого до 50% от фактической ширины экрана, когда ширина экрана составляет не менее 768px, но оставить ее полной на небольших устройствах. Мы будем использовать классы ширины Tailwind, которые мы немного рассмотрели ранее. Классы ширины представлены в формате w-{size}, где sizeможет быть диапазон от 0 до 96, который относится к значению в rem; соотношение, подобное 1/2или ⅗, или другие соотношения, которые относятся к процентам; или ключевое слово, например, autoдля автоматической ширины или fullдля ширины 100%.
Чтобы указать ширину на основе размера экрана, мы используем такие варианты, как sm, md, lgи т. д. Эти варианты указывают минимальный размер экрана, необходимый для применения правила.
В нашем случае, поскольку мы хотим, чтобы ширина составляла 50% от родительского экрана для экранов шириной не менее 768px, мы будем использовать mdвариант с w−½:
return (
{products.map ((product) => (
))}
) ;
Теперь ширина будет изменена на половину ширины экрана. Однако гораздо лучше будет центрировать его по горизонтали. Для этого мы будем использовать служебные классы маржи Tailwind. Классы полей представлены в формате m{side}-{value}, где sideнеобязателен и может быть специфичен для каждой стороны элемента, например t, для верхней, bнижней, lлевой и rправой сторон, или по горизонтали с использованием y, или по вертикали с использованием x. valueможет быть в диапазоне от 0 до 96, может быть pxпросто 1px, или auto. Не только это, но вы также можете добавить отрицательное поле, добавив -в начало класса. Например, -m−2.
Поскольку мы центрируем элемент по горизонтали, мы будем использовать
return (
{products.map ((product) => (
))}
) ;
И вы можете видеть, что он центрирован.
Содержимое по центру
Стилизация компонента продукта
Теперь перейдем к Productкомпоненту. Мы также добавим цвет фона для карточки продукта. Мы сделаем его белым, поэтому будем использовать
return (
<div style={{backgroundImage: `url (${image}) `}}>
{title.substr (0, 50) }
{category}
{price}$
) ;
И вы можете увидеть изменения на сайте:
Белый фон с полем
Как вы можете видеть в нашем Productкомпоненте, внутри самого внешнего элемента у нас есть два элемента, один с фоновым изображением продукта, а другой с информацией. Мы хотим отображать их рядом друг с другом. Первое, что нам нужно сделать, это изменить отображение самого внешнего
return (
<div style={{backgroundImage: `url (${image}) `}}>
{title.substr (0, 50) }
{category}
{price}$
) ;
Далее мы изменим ширину
return (
<div style={{backgroundImage: `url (${image}) `}} className="w-5/12">
{title.substr (0, 50) }
{category}
{price}$
) ;
Если вы посмотрите на
гибкий дисплей
Добавление некоторого интервала
Еще многое нужно исправить.
Итак, мы добавим p−5в контейнер информации о продукте. Мы также добавим некоторое поле в контейнер описания, используя
return (
<div style={{backgroundImage: `url (${image}) `}} className="w-5/12">
{title.substr (0, 50) }
{category}
{price}$
) ;
Мы также добавим верхнее и нижнее поля ко всему контейнеру src/App.js, чтобы первый и последний товары не располагались прямо на краю страницы с обеих сторон. Для этого мы добавим класс
return (
{products.map ((product) => (
))}
) ;
Мы увидим, что
Добавлено дополнение
Улучшение типографики компонента
Давайте теперь немного поработаем над типографикой. Вы можете видеть, что вся информация о продукте выглядит одинаково. Мы не можем отличить название от категории от описания и так далее.
Итак, давайте изменим цвет текста категории на,
return (
<div style={{backgroundImage: `url (${image}) `}} className="w-5/12">
{title.substr (0, 50) }
{category}
{price}$
) ;
Если вы сейчас зайдете на
Изменен цвет текста
Далее изменим размер шрифта. Для этого мы будем использовать классы размера шрифта Tailwind. Формат для этих классов text-{size}, где sizeдиапазоны от smдо 9xl.
Мы сделаем размер шрифта цены больше, добавив класс
return (
<div style={{backgroundImage: `url (${image}) `}} className="w-5/12">
{title.substr (0, 50) }
{category}
{price}$
) ;
Теперь текст выглядит намного лучше.
Измененный размер текста
Позиционирование изображения продукта
Затем давайте исправим изображение, чтобы оно полностью отображалось, и правильно расположим фоновое изображение.
return (
<div style={{backgroundImage: `url (${image}) `}} className="w-5/12 bg-contain bg-no-repeat bg-center">
{title.substr (0, 50) }
{category}
{price}$
) ;
Теперь мы можем видеть изображения полностью.
Изменен размер и положение фона
Вы заметите, что некоторые изображения касаются края контейнера. Чтобы исправить это, мы добавим
return (
<div style={{backgroundImage: `url (${image}) `}} className="bg-contain bg-no-repeat bg-center w-full h-full">
{title.substr (0, 50) }
{category}
{price}$
) ;
Обратите внимание, что мы переместили ширину, которую мы ранее дали фоновому изображению, в
Добавление тени блока и закругленных углов
Наши продукты теперь выглядят намного лучше. Мы добавим два последних штриха к текущему стилю.
В
return (
<div style={{backgroundImage: `url (${image}) `}} className="bg-contain bg-no-repeat bg-center w-full h-full">
{title.substr (0, 50) }
{category}
{price}$
) ;
Наконец, наша страница со списком продуктов выглядит так, как показано на скриншоте ниже.
Добавлена тень коробки
Настройка темы
До сих пор все стили, которые мы делали, основывались на стилях Tailwind по умолчанию. Тем не менее, Tailwind также позволяет нам настраивать нашу тему. Мы можем изменить цвета, семейство шрифтов и многое другое. Все эти изменения сделаны в tailwind.config.js.
Попробуем немного изменить цвета. Есть разные способы изменить цвета темы.
Один из способов сделать это — определить собственные цвета. Например, чтобы добавить новый цвет в нашу тему, мы можем сделать следующее tailwind.config.js:
module.exports = {
purge: [». /src/**/*. {js, jsx, ts, tsx}», «. /public/index.html»],
darkMode: «media», // or 'media’ or 'class’
theme: {
extend: {
colors: {
turquoise: «#40e0d0»
}
},
},
variants: {
extend: {},
},
plugins: [],
};
Обратите внимание, что внутри theme.extendмы добавили colorsобъект, а затем добавили ключ turquoiseс шестнадцатеричным кодом для бирюзового цвета. Теперь мы можем использовать этот цвет так же, как мы использовали бы цвета по умолчанию. Например, чтобы установить бирюзовый цвет фона, вы можете использовать
Другой способ настроить цвета темы — изменить цвета по умолчанию. Как упоминалось ранее, цвета по умолчанию в Tailwind: white, black, gray, red, blue, green, yellow, orange, indigoи purple. pinkВы можете изменить фактическое значение для этих цветов.
Например, чтобы изменить yellowцвет на
module.exports = {
purge: [». /src/**/*. {js, jsx, ts, tsx}», «. /public/index.html»],
darkMode: «media», // or 'media’ or 'class’
theme: {
extend: {
colors: {
yellow: «#e1ad01»
}
},
},
variants: {
extend: {},
},
plugins: [],
};
Теперь, когда вы используете классы по умолчанию для желтого, вы получите желтый цвет, который вы определили здесь. Вы также можете указать значение для различных оттенков цвета, используя числовые шкалы:
module.exports = {
purge: [». /src/**/*. {js, jsx, ts, tsx}», «. /public/index.html»],
darkMode: «media», // or 'media’ or 'class’
theme: {
extend: {
colors: {
yellow: {
200: «#feca1d»,
400: «#e1ad01»,
700: «#b48a01»
}
}
},
},
variants: {
extend: {},
},
plugins: [],
};
Вы также можете использовать такие клавиши, как lightest, light, DEFAULT, dark, darkest:
module.exports = {
purge: [». /src/**/*. {js, jsx, ts, tsx}», «. /public/index.html»],
darkMode: «media», // or 'media’ or 'class’
theme: {
extend: {
colors: {
yellow: {
light: «#feca1d»,
DEFAULT: «#e1ad01»,
dark: «#b48a01»
}
}
},
},
variants: {
extend: {},
},
plugins: [],
};
Добавление цветовой палитры
Третий способ изменить цвет — использовать другие цветовые палитры в Tailwind CSS, что мы и сделаем.
Во- первых, требуйте colorsот tailwindcss/colorsв начале tailwind.config.js:
const colors = require («tailwindcss/colors»)
Далее мы изменим красный на розовую палитру, а серый на
const colors = require («tailwindcss/colors»)
module.exports = {
purge: [». /src/**/*. {js, jsx, ts, tsx}», «. /public/index.html»],
darkMode: «media», // or 'media’ or 'class’
theme: {
extend: {
colors: {
gray: colors.blueGray,
red: colors.rose
}
},
},
variants: {
extend: {},
},
plugins: [],
};
Если вы посмотрите на
Изменены цвета
Если вы хотите хорошо видеть разницу в цветах, можете попробовать изменить серый на янтарный:
const colors = require («tailwindcss/colors»)
module.exports = {
purge: [». /src/**/*. {js, jsx, ts, tsx}», «. /public/index.html»],
darkMode: «media», // or 'media’ or 'class’
theme: {
extend: {
colors: {
gray: colors.amber,
red: colors.rose
}
},
},
variants: {
extend: {},
},
plugins: [],
};
Вы увидите, что фон стал желтоватым.
Вы также можете изменить семейство шрифтов и многое другое из tailwind.config.js, используя те же классы, которые есть в Tailwind CSS. Таким образом, вы можете легко настроить тему в соответствии с вашим дизайном.
Добавление темного режима
Вариант darkпозволяет нам легко стилизовать наши элементы для темного режима, в то же время мы стилизуем их для светлого режима.
В начале, когда мы настраивали наш
Если вы хотите проверить, как
Начнем с изменения цвета фона
return (
{products.map ((product) => (
))}
) ;
Если вы проверите сейчас и ваш браузер/ОС установлен в темный режим (или эмулируется), вы увидите, что цвет фона изменился на более темный оттенок серого.
Фон темного режима
Давайте теперь внесем изменения в карточку товара. Мы добавим класс dark:
return (
<div style={{backgroundImage: `url (${image}) `}} className="bg-contain bg-no-repeat bg-center w-full h-full">
{title.substr (0, 50) }
{category}
{price}$
) ;
Если вы проверите сейчас, вы заметите, что цвет фона карточки продукта изменился, но вы также заметите, что изображение теперь выглядит не очень хорошо, так как оно имеет белый фон.
Карточка товара в темном режиме
Давайте улучшим его, добавив белый фон в фоновую оболочку, когда она находится в темном режиме. Это можно сделать, добавив класс dark:
return (
<div style={{backgroundImage: `url (${image}) `}} className="bg-contain bg-no-repeat bg-center w-full h-full">
{title.substr (0, 50) }
{category}
{price}$
) ;
Окончательный вид нашего сайта показан ниже.
Темный режим
Группы и включение вариантов для плагинов
Некоторые варианты не включены для всех плагинов по умолчанию, так как это приведет к большому размеру файла. Итак, если нам нужно использовать эти варианты, мы должны включить их вручную tailwind.config.jsдля нужного нам плагина. Плагины — это классы, которые мы использовали все это время. Например, цвета фона принадлежат backgroundColorплагину.
Один из неактивных вариантов —
Мы собираемся сделать каждую карточку продукта group, а затем при наведении мы будем увеличивать изображение. Итак, мы добавим groupкласс к самому внешнему элементу в Productкомпоненте, затем мы добавим к элементу, у которого есть фоновое изображение, следующие классы:
Используя приведенные выше классы, изображение будет увеличиваться при наведении курсора на любой элемент продукта. Мы также добавим класс
return (
<div style={{backgroundImage: `url (${image}) `}} className="bg-contain bg-no-repeat bg-center w-full h-full transition-transform duration-300 group-hover:transform group-hover:scale-125">
{title.substr (0, 50) }
{category}
{price}$
) ;
Примечание: если вы эмулируете темный режим (или используете темный режим), вы можете лучше увидеть эффект в светлом режиме, поэтому обязательно переключитесь на светлый режим.
Если вы сейчас попытаетесь навести курсор на товар, то увидите, что тень увеличивается, а изображение увеличивается.
Групповое наведение
Заключение
Мы создали аккуратный, отзывчивый
