Налаштування Tailwind CSS з React 19 на Vite

Щоб налаштувати Tailwind CSS для Vite@React19, ми можемо виконати наступні кроки:

Крок 1: Встановлення Tailwind CSS

Встановіть ‘tailwindcss’ та ‘@tailwindcss/vite’ через npm

npm install tailwindcss @tailwindcss/vite

Крок 2: Налаштування плагіна Vite

У вас вже має бути файл vite.config.js або vite.config.ts, в залежності від налаштувань вашого проєкту. Якщо це новий проєкт, ваш файл vite.config.{js/ts} виглядатиме ось так:

import { defineConfig } from 'vite'  
import react from '@vitejs/plugin-react'  

// https://vite.dev/config/  
export default defineConfig({  
 plugins: [react()],  
})

Нам потрібно додати плагін tailwindcss до цього файлу, фактично ви можете просто скопіювати і вставити весь вміст файлу в vite.config.{js/ts}

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(),  
 ],  
})

Крок 3: Додайте імпорт Tailwind CSS до вашого файлу ‘index.css'

Це не обов'язково має бути саме файл index.css, якщо ви використовуєте іншу назву файлу, просто використовуйте її. Але переконайтеся, що цей .css файл імпортується у вашому файлі main.{jsx/tsx}.

@import "tailwindcss";  

:root {  
 font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;  
 line-height: 1.5;  
 font-weight: 400;  
}

Тепер ви готові використовувати tailwindCSS у вашому проєкті

Ви можете почати використовувати Tailwind CSS у вашій програмі.

Тестування: Оновіть файл index.html та запустіть команду npm run dev

Посилання на джерело: Tailwindcss з використанням vite [https://tailwindcss.com/docs/installation/using-vite]

Перекладено з: Setup Tailwind CSS with React 19 Vite