Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Як підключити Tailwind.css до свого Javascript проекту на Node.js.


Sha

167 переглядів

Повна документацiя на офiцiйному сайтi. [EN]

 

1) Нам потрiбно завантажити та встановити Node.js
2) Перейти до консолi
3) Зазвичай він використовується у зв'язку з якимось проектом, наприклад Vite, або PrimeVue
4) В консолi ввести:

npm install -D tailwindcss postcss autoprefixer

image.png.40bb04a9df20b271e428b23e5d3601bd.png

 

5) Згенерувати конфігураційні файли, пишемо

npx tailwindcss init -p

image.png.7e623bcbd7faa8f9171712ba4d09fece.png

Ось вони:

tailwind-multiedit-npm.png.7888fef10beb7bbf9f8049fcd9c117de.png

 

6) Тепер нам потрiбно вiдкрити до редагування файл tailwind.config.js, та внести ось такi змiни

"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}"

tw-multiedit-css.png.bb751ae2822a4496637664cf3cb1b813.png

 

7) Далi вiдкрити файл style.css, та додати ось такi змiни

@tailwind base;
@tailwind components;
@tailwind utilities;

tail-wind-multi-edit-pro-vite-project.thumb.png.8ade4bd6148bd5d4d71d22dc6f7b06a6.png

 

8) Якщо ви вперше розгортаєте проект, вам може знадобиться пiдтянути залежностi

npm i

 

9) Останнiй шаг це запуск проекту!

npm run dev

В мене вийшло!)

taill-multiedit.png.c468414ba24ca57d53387630a6514362.png

 

Як пiдключити tailwind до OpenCart робочого проекту , за допомогою CDN? (офiцiйний сайт)

Нашi проекти!

 

0 коментарів


Recommended Comments

Немає коментарів для відображення

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.