Това е бърз урок за това как можете да настроите 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
Ако текстът ви е син, всичко е настроено правилно, поздравления!