Налаштуйте Tailwind у вашому проекті на Vite за допомогою однієї команди

Привіт, хлопці, налаштування 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