React Tailwind CSS

Использование Tailwind CSS в проекте React — очень популярный выбор, потому что он предоставляет подход utility-first к написанию CSS, позволяя применять стили непосредственно в именах классов. Этот метод делает стилизацию более лаконичной и интуитивной.

Учебник по Tailwind CSS:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Официальный сайт Tailwind CSS:https://tailwindcss.com/

Адрес GitHub:https://github.com/tailwindlabs/tailwindcss

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

Ниже приведены подробные шаги по использованию Tailwind CSS в проекте React.

1. Установите Tailwind CSS

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

Создайте новый проект React:

npx create-react-app my-app
cd my-project

Установить Tailwind CSS

Выполните следующую команду в каталоге вашего проекта, чтобы установить Tailwind CSS и необходимые зависимости:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Это создаст файл tailwind.config.js и файл postcss.config.js.

Структура вашего проекта должна выглядеть примерно так:

my-app/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...（其他文件）
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── tailwind.config.js

2. Настройка Tailwind CSS

Отредактируйте файл tailwind.config.js, чтобы настроить Tailwind для удаления неиспользуемых стилей. Обновите массив content, чтобы включить все пути к файлам шаблонов:

Пример

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

3. Добавьте базовые стили Tailwind

В вашем проекте откройте файл src/index.css и добавьте следующее содержимое, чтобы включить базовые стили, стили компонентов и утилитарные стили Tailwind:

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

4. Используйте Tailwind CSS для написания стилей

Теперь вы можете начать использовать имена классов Tailwind CSS в своих компонентах React для написания стилей.

Код файла App.js:

import React from 'react';

const App = () => {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="bg-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl font-bold text-gray-900">Привет, ПРИМЕР!</h1>
<p className="mt-4 text-gray-600">Пример руководства: вы изучаете не только технологии, но и мечты!</p>
<button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
Нажмите на меня, чтобы попробовать
</button>
</div>
</div>
);
};

export default App;

Убедитесь, что ваш файл src/index.js правильно импортирует компонент App и рендерит его в DOM.

Код файла src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Приложение />
</React.StrictMode>
);

Запустите:

npm start

Затем откройте браузер и перейдите по адресу http://localhost:3000. Вы должны увидеть простое приложение React, оформленное с помощью Tailwind CSS.

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

Другие расширения

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