Привіт, хлопці, налаштування Tailwind у ваших проектах на Vite може зайняти два-три кроки.
Наприклад, у Vite з React,
- Потрібно встановити Tailwind.
- Згенерувати конфігураційні файли.
- Додати шаблон до цих файлів.
Але я створив npm пакет, який налаштовує Tailwind однією командою у вашому проекті. Він автоматично встановить Tailwind, згенерує конфігураційний файл і додасть шаблони до нього.
Інсталяція:
npm install -g lazywind
Встановіть пакет глобально.
Далі запустіть,
lazywind
Запустіть цю команду в директорії вашого проекту.
Приклад:
Тепер налаштуємо React проект за допомогою Vite
Налаштуйте React,
npm create vite@latest client -- --template react
cd client
npm install
Після налаштування React і встановлення залежностей ви можете запустити проект за допомогою:
npm run dev
Налаштування Tailwind за допомогою Lazywind
Сподіваюся, ви встановили lazywind глобально, тепер запустіть lazywind у вашій папці проекту, наприклад, client — це папка в цьому випадку.
Це зробить наступне:
- Встановить Tailwind CSS
- Згенерує файли
tailwind.config.jsіpostcss.config.js - Додасть необхідні шаблони.
І все, лише одна команда.
Посилання на пакет: https://www.npmjs.com/package/lazywind
Налаштування Tailwind завершено. Спробуйте і дайте мені зворотній зв'язок — мені буде цікаво почути вашу думку!
Перекладено з: Setup Tailwind in your Vite Project with this one command