Когда вы создаете проект React-Vite и планируете подключить TailwindCSS, вам следует обязательно обратить внимание на версию TailwindCSS. В зависимости от этой версии вам нужно будет сделать ряд настроек.
TailwindCSS версия 4
На данный момент актуальной является версия 4.1. Какую вы установили в проект, если уже это сделали, вы можете проверить в файле package.json в блоке devDependencies:
1 2 3 4 5 6 7 8 9 10 | "devDependencies": { ... "@types/react": "^19.2.5", "@types/react-dom": "^19.2.3", "@vitejs/plugin-react": "^5.1.1", "autoprefixer": "^10.4.23", ... "tailwindcss": "^4.1.18", "vite": "^7.2.4" } |
Для получения файла package.json вам нужно было, собственно, создать проект Vite и перейти в папку с ним следующими командами в терминале:
1 2 | npm create vite@latest my-project cd my-project |
Теперь установите в проект Vite Tailwind CSS с помощью плагина npm @tailwindcss/vite:
1 | npm install tailwindcss @tailwindcss/vite |
Настройте плагин Vite, добавив установленный плагин в конфигурацию Vite в файле vite.config.ts:
1 2 3 4 5 6 7 8 9 10 11 | import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' // https://vite.dev/config/ export default defineConfig({ plugins: [ react(), tailwindcss() ], }) |
Теперь нужно добавить @importTailwind CSS в свой CSS-файл, например, в index.css.
1 | @import "tailwindcss"; |
Добавьте классы Tailwind CSS в любой элемент(-ы) вашего проекта.
1 2 3 4 5 6 7 8 9 10 11 12 13 | function App() { return ( <div className="min-h-screen bg-slate-100 flex items-start justify-center pt-20"> <div className="w-full max-w-xl bg-white rounded-xl shadow p-6 space-y-6"> <h1 className="text-2xl font-semibold text-slate-800 text-center"> Тест </h1> </div> </div> ); } export default App |
Запустите процесс сборки с помощью команды npm run dev в терминале или любой другой команды, указанной в вашем файле package.json.
1 | npm run dev |
Использование PostCSS
Установите npm-плагин PostCSS командой в терминале:
1 | npm install tailwindcss @tailwindcss/postcss postcss |
Создайте или найдите в корневой папке проекта файл postcss.config.mjs и добавьте в него такой код:
1 2 3 4 5 | export default { plugins: { "@tailwindcss/postcss": {}, } } |
Добавьте директиву @import в свой CSS-файл, чтобы импортировать Tailwind CSS.
1 | @import "tailwindcss"; |
Добавьте классы Tailwind CSS в любой элемент(-ы) вашего проекта.
1 2 3 4 5 6 7 8 9 | function App() { return ( <h1 class="text-3xl font-bold underline"> Hello world! </h1> ); } export default App |
Запустите процесс сборки проекта (см. файл package.json):
1 | npm run dev |
Если у вас не получилось, примерно все то же самое вы можете прочитать в официальном руководстве по подключению Tailwind CSS в проект Vite.
TailwindCSS версии 3
После создания проекта вам нужно (было бы) добавить 2 команды для установки TailwindCSS и npm-плагина PostCSS:
1 2 | npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p |
В файл стиле нужно (было бы) добавить 3 строчки кода:
1 2 3 | @tailwind base; @tailwind components; @tailwind utilities; |
Затем вам нужно (было бы) создать в корне проекта файл tailwind.config.js с таким содержимым:
1 2 3 4 5 6 7 8 9 10 11 | module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], darkMode: 'class', // or 'media' theme: { extend: {}, }, plugins: [], }; |
Можно несколько расширить предыдущие настройки:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | const colors = require('tailwindcss/colors/); module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], darkMode: 'class', // or 'media' theme: { extend: { colors: { // можно не указывать "light-blue": colors.lightBlue, cyan: colors.cyan } }, }, plugins: [], }; |
Это еще не все. Также нужно (было бы) создать в корне проекта файл postcss.config.js и добавить в него код:
1 2 3 4 5 6 | export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, } |
Дальше вы добавляете классы в ваш основной код и запускаете сборку проекта командой npm run dev или другой в зависимости от настроек в вашем файле package.json.
Все варианты подключения TailwindCSS в различные проекты вы можете найти на официальном сайте.
