Руководство для начинающих по Tailwind CSS в React

Устали от самоуверенных CSS-фреймворков? Ищете надежный вариант, который дает вам свободу творчества? Попробуйте Tailwind CSS.

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

Зачем использовать Tailwind CSS?

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

CSS-фреймворки, такие как Bootstrap и Foundation, являются самоуверенными фреймворками, то есть они предоставляют разработчикам заранее определенные компоненты со стилями по умолчанию. Это ограничивает как настройку, так и креативность, и в итоге вы получаете веб-сайты, которые выглядят довольно стандартными.

Однако Tailwind CSS — это платформа, ориентированная на утилиты, которая дает вам творческий контроль над созданием динамических компонентов. И в отличие от Bootstrap, вы можете легко настроить дизайн по своему усмотрению.

Еще одним преимуществом использования Tailwind CSS является то, что вы получаете небольшой размер пакета CSS, поскольку он удаляет весь неиспользуемый CSS в процессе сборки (что отличается от Bootstrap, поскольку он включает в сборку все файлы CSS).

Узнайте больше о различиях между Tailwind CSS и Bootstrap из нашей статьи на эту тему.

Недостатки использования Tailwind CSS

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

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

Даже несмотря на эти недостатки, Tailwind CSS — это платформа, которую вам следует серьезно рассмотреть, если вы уже знакомы с CSS и хотите быстрее создавать проекты.

Начало работы: создание проекта React

Запустите следующую команду в терминале, чтобы создать шаблон приложения React, используя create-react-app.

npx create-react-app react-tailwind

create-react-app обеспечивает простой способ создания приложения React без настройки таких инструментов сборки, как Webpack, Babel или линтеры. Это означает, что вы получите рабочую среду React за считанные минуты.

Приведенная выше команда создает новую папку с именем react-tailwind. Перейдите к папке и откройте ее с помощью предпочитаемого вами текстового редактора.

cd react-tailwind

Затем установите Tailwind CSS и настройте его для работы с приложением React.

Используйте Tailwind CSS в React

Установите Tailwind CSS и его зависимости с помощью этой команды:

npm install tailwindcss postcss autoprefixer

PostCSS использует плагины JavaScript, чтобы сделать CSS совместимым с большинством браузеров. Он проверяет браузер, в котором запущено приложение, и определяет полифилы, необходимые для бесперебойной работы вашего CSS. Autoprefixer — это плагин PostCSS, который использует значения с caniuse.com для автоматического добавления префиксов поставщиков в правила CSS.

Инициализация CSS Tailwind

Запустите команду tailwind init, чтобы сгенерировать файлы конфигурации CSS Tailwind по умолчанию.

npx tailwindcss init

При этом в корневой папке создается tailwind.config.js, в котором хранятся все файлы конфигурации Tailwind и содержится следующее:

module.exports = {
 content: [],
 theme: {
   extend: {},
 },
 plugins: [],
}

Настройка путей к шаблонам

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

В Tailwind.config.js добавьте пути к шаблонам под ключом содержимого.

module.exports = {
 content: [
   "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

Внедрение Tailwind CSS в React

Следующим шагом будет включение CSS Tailwind в приложение с помощью директив @tailwind.

Удалите все в index.css и добавьте следующее, чтобы импортировать базовые стили, компоненты и утилиты.

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

Наконец, убедитесь, что index.css импортирован в index.js , и CSS Tailwind будет готов к использованию.

Использование Tailwind CSS для стилизации компонента React

Вы создадите простую веб-страницу ниже и стилизуете ее, используя служебные классы Tailwind.

Эта страница содержит два основных раздела: панель навигации и главный раздел (который имеет заголовок и кнопку).

Чтобы проиллюстрировать, как Tailwind CSS упрощает написание CSS, попробуйте стилизовать веб-страницу с помощью простого CSS и Tailwind CSS.

Начните с изменения файла App.js в папке src , удалив ненужный код.

import './App.css'
function App() {
 return (
   <div className='app'>
   </div>
 );
}
export default App;

Затем добавьте содержимое веб-страницы в App.js.

import "./App.css";
function App() {
 return (
   <div className="wrapper">
     <nav>
       <div className="logo">Tailwind CSS</div>
       <ul>
         <li>Install</li>
         <li>Docs</li>
       </ul>
     </nav>
     <div className="hero">
       <h1 className="header">
         Tailwind CSS makes styling React components easier!
       </h1>
       <button className="btn">Get Started</button>
     </div>
   </div>
 );
}

Чтобы использовать простой CSS, добавьте его в App.css.

nav {
 display: flex;
 justify-content: space-between;
 padding: 16px 36px;
 color: #000;
 box-shadow: 0px 2px 5px 0px rgba(168, 168, 168, 0.75);
}
.logo {
 font-size: 18px;
 font-weight: bold;
}
ul {
 list-style: none;
 display: inline-flex;
}
ul li {
 margin-left: 16px;
 cursor: pointer;
}
.hero {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-top: 64px;
}
h1 {
 font-size: 36px;
 text-align: center;
}
.btn {
 background-color: #000000;
 color: #fff;
 padding: 10px;
 width: fit-content;
 margin-top: 36px;
}

С Tailwind CSS вам не нужно писать правила CSS для каждого класса. Вместо этого вы используете служебные классы. Это классы, ограниченные одним свойством CSS. Например, если вы хотите создать кнопку с черным фоном и белым цветом текста, вам необходимо использовать служебные классы bg-black и text-white .

App.js должен выглядеть так.

function App() {
 return (
   <div>
     <Navbar />
     <div className="flex flex-col items-center mt-16">
       <h1 className="text-4xl text-center">
         Tailwind CSS makes styling React components easier!
       </h1>
       <button className="bg-black text-white p-2.5 w-fit mt-9 ">
         Get Started
       </button>
     </div>
   </div>
 );
}

Вам не нужно импортировать App.css , поскольку стили, созданные Tailwind CSS, хранятся в index.css, который вы импортировали в index.js. > раньше.

По сравнению с простым CSS, этот подход приводит к меньшему количеству легкого для понимания кода.

Стильный код с помощью Tailwind CSS

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

Но, как мы упоминали ранее, Tailwind — далеко не единственный CSS-фреймворк на рынке. Что вы будете использовать для своего следующего проекта?