Това е бърз урок за това как можете да настроите Tailwind CSS за вашия React проект.

Стъпка 1: Създайте своя проект

$ npx create-react-app project-name
$ cd project-name

Стъпка 2: инсталирайте зависимостите на tailwind

# Using npm
$ npm install tailwindcss --save-dev

# Using Yarn
$ yarn add tailwindcss --dev

Стъпка 3: Настройте PostCSS и Autoprefixer

Изпълнете следната команда, за да създадете файл tailwind.js с конфигурацията по подразбиране на tailwind

$ npx tailwind init tailwind.js --full

След това инсталирайте PostCSS за трансформиране на вашите стилове

$ npm install postcss-cli autoprefixer --save-dev
or
$ yarn add postcss-cli autoprefixer --save-dev

(По избор): Ако имате проблеми с инсталирането на горната стъпка, опитайте да стартирате -

$ npm uninstall tailwindcss postcss autoprefixer
$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Горните две команди ще деинсталират Tailwind, PostCSS и автоматичния префикс и ще ги инсталират отново, като вместо това използват компилация за „съвместимост“.

(*Забележка: направете следното само ако вашата среда е актуализирана, за да поддържа най-новата версия на PostCSS. В противен случай преминете към стъпка 4*)

Ако вашата среда се актуализира, така че да може да работи без компилация за съвместимост, тогава ще искате да стартирате -

$ npm uninstall tailwindcss @tailwindcss/postcss7-compat
$ npm install tailwindcss@latest postcss@latest autoprefixer@latest

Тези команди ще гарантират, че използвате най-новите версии на tailwind, PostCSS и автоматичния префикс

Стъпка 4:Конфигурирайте своя PostCSS

Изпълнете следната команда, за да създадете своя конфигурационен файл на PostCSS

$ touch postcss.config.js

Добавете следните редове код към вашата PostCSS конфигурация:

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

Стъпка 5:Актуализирайте скриптовете в package.json

Сега отидете до вашия пакет json файл в главната директория и заменете „скриптовете“ със следното -

"scripts": {
  "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
  "start": "npm run build:style && react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

Стъпка 6: Създайте вашата папка със стилове

Създайте папка с име „styles“ във вашата папка „src“. Това е мястото, където ще се съхраняват всички ваши стилове.

В папката „styles“ създайте файл „tailwind.css“ и „index.css“.

добавете или:

// ./src/styles/index.css 
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

or

// ./src/styles/index.css
@tailwind base;

@tailwind components;

@tailwind utilities;

във вашия файл index.css.

Стъпка 7: Импортирайте tailwind.css

Трябва да изтриете файловете index.css и app.css в главната директория на вашите проекти и да премахнете инструкциите за импортиране съответно във файловете Index.js и App.js.

Сега сте готови да импортирате tailwind във вашия файл index.js

import './styles/tailwind.css';

Стъпка 8: Проверете дали попътният вятър работи

Сега във вашия файл app.js продължете и добавете следния код

<div className="text-blue-500">
     TailwindCSS setup
</div>

Вашият файл app.js трябва да изглежда нещо подобно

След това приложението ви на локален хост

$ yarn start

Ако текстът ви е син, всичко е настроено правилно, поздравления!