Установка Tailwind CSS в проекте React, сконфигурированном с нуля с помощью Webpack

Tailwind CSS — это первый CSS-фреймворк, который позволяет разработчикам создавать пользовательские веб-компоненты без перехода к CSS-файлу. В этом руководстве я проведу вас шаг за шагом через процесс настройки Tailwind CSS в проекте React, сконфигурированном с нуля (без использования create-react-app). Мы установим и настроим Tailwind CSS и PostCSS, интегрируем их с CSS и Webpack и, наконец, добавим Tailwind Styles в нашу кодовую базу React. (много веселья).

Внимание!
Эта статья является четвертой частью цикла по настройке окружения React с нуля. В этой серии мы уже создали проект React с нуля, установили ESLint, Prettier и husky, настроили среду тестирования с помощью Jest и React Testing Library. В этой части мы продолжим начатое и добавим Tailwind CSS для стилизации.

Вы можете найти исходный код в этом репозитории GitHub

Предварительные условия

Я ожидаю, что у вас есть проект React, настроенный с нуля. Для справки вы можете начать с репозитория, предоставленного выше, но вы все равно можете следовать за ним, если эта статья нужна вам по каким-либо другим причинам
VS code и Node установлены на вашей машине.

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

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

Tailwind вы можете быстро создавать современные веб-сайты, не выходя из HTML.

С Tailwind вы можете создавать стили прямо из вашего html или jsx, используя предопределенные классы Tailwind CSS, что позволяет вам писать CSS более элегантным и быстрым способом. Это не означает, что вы всегда должны использовать Tailwind, так как он может быть излишним для небольших проектов и требует приличного понимания CSS. Узнать больше о Tailwind CSS можно ЗДЕСЬ.

PostCSS
PostCSS — это инструмент для преобразования стилей с помощью плагинов JavaScript. Эти плагины могут улучшить ваши стили различными способами. Например, как ESLint для JavaScript PostCSS позволяет вам использовать плагины, которые могут обнаружить ошибки в вашем коде CSS, или использовать синтаксис CSS нового поколения (подобно Babel для CSS) и многое другое. Tailwind CSS является одним из таких плагинов, поэтому для использования Tailwind необходимо установить PostCSS.
Узнать больше о PostCSS можно ЗДЕСЬ

Мы вернемся к этим инструментам более подробно позже, а пока давайте начнем.

Выполните следующие шаги

1. Установка зависимостей Tailwind
Выполните следующую команду для установки Tailwind CSS (в качестве dev-зависимости).

npm install tailwindcss autoprefixer --save-dev

// using yarn

yarn add tailwindcss autoprefixer --dev

Войдите в полноэкранный режим Выйдите из полноэкранного режима

2. Настройка Tailwind CSS
В корневой папке создайте файл tailwind.config.cjs, в котором будут храниться ваши конфигурации и настройки для Tailwind,
мы назвали его с расширением .cjs, потому что мы будем использовать синтаксис require в модуле ES

в tailwind.config.cjs добавьте следующий код

module.exports = {
    content: ['./src/**/*.{js,jsx}', './public/index.html'],
    theme: {
        extend: {
            colors: {
                primary: '#1B73E8',
            },
        },
    },
    plugins: [],
};

Войти в полноэкранный режим Выйти из полноэкранного режима

Что означает этот код?

Мы экспортируем эту конфигурацию с помощью module.exports.
Поле content очень важно, поскольку оно определяет типы файлов, в которые мы будем добавлять код Tailwind. В нашем примере мы указываем Tailwind искать все файлы в папке src с расширениями .js и jsx, а также index.html в папке public.
В папке theme мы разместим наши настройки, расширяя конфигурации по умолчанию. В нашем примере мы создаем переменную цвета primary с кодом цвета '#1B73E8', поэтому каждый раз, когда мы упоминаем primary как цвет, Tailwind CSS будет вставлять его значение.
Поле plugins — это место, куда мы помещаем наши плагины, которые мы хотим использовать с Tailwind. В данном примере мы не используем плагины, поэтому массив пуст.

Обратите внимание, что конфигураций больше, и вы можете настроить их по своему усмотрению. Узнайте больше о конфигурациях tailwind ЗДЕСЬ

3. Установите зависимые компоненты PostCSS
Выполните следующую команду, чтобы установить PostCSS (как зависимость dev).

npm install postcss --save-dev

// using yarn

yarn add postcss  --dev

Войдите в полноэкранный режим Выйдите из полноэкранного режима

4. Настройка PostCSS
В корневой папке создайте файл postcss.config.cjs, который будет содержать ваши настройки для PostCSS, и добавьте следующий код

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [tailwindcss('./tailwind.config.cjs'), autoprefixer],
};

Вход в полноэкранный режим Выйти из полноэкранного режима

Что означает этот код?

Мы импортируем пакеты Tailwind css и autoprefixer, которые мы установили ранее, используя require вы можете использовать import, если вы используете ES модули
в экспорте конфигураций мы указываем плагины, которые PostCSS будет использовать при просмотре наших CSS файлов. в нашем случае мы указываем tailwind и autoprefixer. для tailwind мы указали путь к нашему конфигурационному файлу tailwind (tailwind.config.cjs). Подробнее о конфигурациях PostCSS можно узнать ЗДЕСЬ

5. Внедряем Tailwind в файл CSS
Мы установили и настроили Tailwind CSS и PostCSS в нашей базе данных, но как нам добавить Tailwind CSS в наши компоненты React. Как упоминалось выше, Tailwind CSS использует предопределенные классы, которые соответствуют реальным свойствам CSS. технически нам все равно нужно иметь файлы CSS, даже если мы не пишем CSS напрямую.

В папке src, где у нас есть App.jsx (созданный в предыдущих статьях), создайте файл app.css, который будет нашим основным CSS файлом.
В app.css добавьте следующий код

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

Войти в полноэкранный режим Выйти из полноэкранного режима

Это введет стили tailwind в наш css файл с помощью директив tailwind. Это как импортировать стили Tailwind, чтобы они были распознаны как настоящий синтаксис CSS. узнайте больше о директивах Tailwind ЗДЕСЬ

Наконец, импортируйте этот CSS-файл во входной файл вашего проекта React. В данном примере я помещу его в файл App.jsx.

Ваш app.jsx должен выглядеть следующим образом

import React from 'react';
import './app.css'; //added line

function App() {
    return <h1>Hello world! I am using React</h1>;
}

export default App;

Вход в полноэкранный режим Выйти из полноэкранного режима

6. Поддержка CSS с помощью Webpack
В первой статье мы настроили наш проект react с помощью Webpack для объединения всех файлов в один файл javascript, который будет обслуживаться нашим index.html.
Дело в том, что Webpack не поддерживает файлы из коробки, каждый раз, когда мы добавляем новые типы файлов, нам нужно заставить Webpack распознать их с помощью своих загрузчиков, и мы сделали то же самое для файлов .js и jsx в первой статье.

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

Выполните следующую команду для установки Webpack CSS loaders (как dev dependencies).

npm install style-loader css-loader postcss-loader

// using Yarn

yarn add style-loader css-loader postcss-loader --dev

Войдите в полноэкранный режим Выйдите из полноэкранного режима

—style-loader: используется webpack для внедрения CSS в DOM.
—css-loader: используется webpack для интерпретации и разрешения импортов в CSS.
—postcss-loader: используется webpack для обработки PostCSS, так как мы установили PostCSS ранее.

После установки этих загрузчиков нам необходимо добавить их в наш webpack.config.js, добавив новое правило в объект modules

{
  test: /.css$/i,
  use: ['style-loader', 'css-loader', 'postcss-loader'],
},

Войти в полноэкранный режим Выйти из полноэкранного режима

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

В итоге ваш полный файл webpack.config.js должен выглядеть следующим образом

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: 'index.jsx',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index_bundle.js',
    },
    target: 'web',
    devServer: {
        port: '5000',
        static: {
            directory: path.join(__dirname, 'public'),
        },
        open: true,
        hot: true,
        liveReload: true,
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'],
    },
    module: {
        rules: [
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /.css$/i,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'public', 'index.html'),
        }),
    ],
};

Вход в полноэкранный режим Выйти из полноэкранного режима

7. Стиль ваших компонентов React с помощью Tailwind
После этих настроек вы должны быть в состоянии написать код tailwind в любом из ваших компонентов React без проблем.
В app.jsx добавьте следующий код

import React from 'react';
import './app.css';

function App() {
    return <h1 className="text-primary text-4xl font-bold">Hello world! I am using React</h1>;
}

export default App;

Войти в полноэкранный режим Выйти из полноэкранного режима

мы только что добавили класс tailwind, чтобы изменить наш текст на основной цвет, который мы настроили в tailwind.config.cjs, увеличить размер шрифта, сделать текст жирным

После запуска приложения с помощью npm start страница должна выглядеть следующим образом

Вот и все! Вот как настроить Tailwind CSS в проекте react, сконфигурированном с нуля с помощью Webpack. Код для этой статьи вы можете найти на GitHub Repo.

Что насчет тестов?
В настоящее время, если вы попытаетесь запустить тесты (npm test), они потерпят неудачу, так как импортируют CSS файл, а по умолчанию Jest не понимает CSS файлы, поэтому нам нужно будет поиздеваться над ними, и это будет темой для следующей статьи…

Установка Tailwind CSS в проекте React, сконфигурированном с нуля с помощью Webpack | пошаговое руководство

Рекомендуем почитать: