Привіт всім 👋, сьогодні хочу розповісти про те, що таке Tailwind CSS, чому та як його використовувати! (Наразі це один з моїх улюблених фреймворків для фронтенду ✨).
Ця публікація стосується версії Tailwind CSS 3 і є продовженням іншої публікації посилання.
По-перше, з Новим роком 🎉, сподіваюся, ви добре провели ці дні ✨.
Вступ
Якщо ви не знаєте, що таке фреймворк або бібліотека, можете ознайомитися з моїм іншим постом, ось посилання 😶🌫️.
Передумови
- Знання HTML, CSS та JavaScript
- Оточення для виконання JavaScript, як Node.js, Bun або Deno (я надам приклади для всіх)
- Ваш улюблений текстовий редактор (Visual Studio Code) або IDE (я використовую IntelliJ Ultimate)
Чому
Можливо, ви задаєтеся питанням, чому ж ми маємо використовувати бібліотеку чи фреймворк для CSS? Справа в тому, що в процесі роботи над багатьма проєктами ми часто переписуємо одні й ті самі речі, наприклад, кнопки, модальні вікна, навіть просте використання окремих властивостей, таких як flex, та багато інших прикладів.
Що таке Tailwind CSS
Tailwind CSS — це фреймворк CSS, який орієнтований на утиліти. Кількома словами, він спрямований на створення атомарних CSS класів-утиліт, таких як 'flex', який використовується для задання властивості ‘display: flex’ для елемента. Це дозволяє значно полегшити та пришвидшити розробку, даючи змогу розробникам безпосередньо працювати з HTML, на відміну від інших фреймворків, таких як Bootstrap, які зосереджуються на наданні попередньо визначених компонентів.
Чому Tailwind CSS
На мою думку, є кілька переваг, які можна отримати, використовуючи Tailwind. Ось деякі з них:
- Швидка розробка: Якщо хочете, то у більшості випадків можна обійтися без написання CSS, що економить час і зменшує потребу думати про те, як структурувати CSS.
- Підхід Utility-First: Оскільки це фреймворк, що надає основні утиліти, він ідеально підходить для побудови на ньому інших фреймворків, таких як Daisy UI, PrimeVue, Flowbite та багато інших.
- Оптимізація продуктивності: Під час побудови для продакшену непотрібні стилі видаляються, що дозволяє створювати менші CSS файли та знижує час завантаження.
- Налаштування: Tailwind дуже гнучкий, дозволяючи легко змінювати чи додавати багато налаштувань через конфігураційний файл.
Кодинг
⚠️Це продовження з попереднього посту
Залежності
npm install -D tailwindcss postcss autoprefixer
// або
deno add npm:tailwindcss npm:postcss npm:autoprefixer
// або
bun install -D tailwindcss postcss autoprefixer
Конфігурація
Тепер, коли ми встановили необхідні залежності, можемо виконати команди для створення конфігураційного файлу для Tailwind CSS:
npx tailwindcss init
// або
deno run npm:tailwindcss init
// або
bunx tailwindcss init
Це створить файл під назвою ‘tailwind.config.js’, який потрібно буде відредагувати, щоб він міг читати файли нашого проєкту та знаходити класи, які ми будемо використовувати.
Якщо вам потрібні конфігурації для інших фреймворків, ви можете перевірити це посилання.
/** @type {import('tailwindcss').Config} */
export default {
content: [ // Тут будуть оголошені файли для спостереження
"./src/**/*.{html,js,vue,ts}", // Це охопить усі файли в папці src
'./index.html' // Це охопить файл index.html
],
theme: { // Це використовується для зміни поведінки
extend: {}, // Це додасть нові елементи
},
plugins: [], // Це використовується при підключенні інших бібліотек
}
Тепер ми створимо новий файл під назвою ‘postcss.config.js’, який міститиме ось це.
⚠️ Важливо зазначити, що якщо ви використовуєте Deno, вам потрібно назвати файл ‘postcss.config.cjs’
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Після цього, якщо у вас є файл CSS, вам потрібно додати ці рядки на початку вашого файлу.
@tailwind base;
@tailwind components;
@tailwind utilities;
Останній крок, і не менш важливий — це додати імпорт вашого файлу CSS у ваш ‘main.js’, ось так:
import './assets/main.css'
З цим ми завершили базову конфігурацію для використання Tailwind CSS 🔥!
Приклади
Тепер я покажу кілька прикладів, які, на мою думку, є основними знаннями, які вам знадобляться. Ось HTML приклад того, як це використовувати.
Home
About
``` Як ви можете побачити, це дійсно просто, оскільки більшість класів мають імена, схожі на властивості або значення CSS, що робить їх легкими для засвоєння ✨! Є певні правила та відмінності, які ви повинні пам’ятати, наприклад, коли ви хочете використати **_hover_**, **_focus_** або інші можливі модифікатори, ви ставите їх перед класом з двокрапкою для відокремлення. Інша відмінність — це text-white, назва зрозуміла, але важливо пам’ятати, що це стосується властивості ‘_color_’ в CSS. У Tailwind CSS є безліч модифікаторів, таких як для адаптивного дизайну, темного режиму, доступу до псевдоелементів і багато іншого. Це робить його дуже зручним, оскільки все можна зробити за допомогою класів CSS, без необхідності створювати вимірювання вручну і багато іншого. Ось приклад списку з [темним режимом](https://tailwindcss.com/docs/dark-mode) та [адаптивним дизайном](https://tailwindcss.com/docs/responsive-design) ```
Home
About
``` А що, якщо я хочу створювати класи, орієнтовані на компоненти? Ну, ви все одно можете використовувати Tailwind CSS для створення таких класів, застосовуючи класи Tailwind CSS ось так. ``` .card-flex { @apply flex justify-center items-center gap-4 hover:bg-red-600; } ``` Як ви можете бачити, для цього потрібно використовувати директиву @apply, щоб застосувати класи Tailwind CSS. Це дозволяє використовувати не тільки класи, але й модифікатори, як ви бачите в прикладі, що робить це ще крутішим, на мою думку.🤩. ## Магія Можливо, ви думаєте, що все це дуже добре, але що, якщо я хочу використати кастомний колір або поставити фонове зображення? Що ж, вони реалізували дуже цікаву функцію, яка для мене виглядає майже як магія, і це створення довільних класів.
Я знаю, що це не дає вам нічого конкретного, але зараз я покажу вам приклад.
Ciao, It's me Mario
``` Як ви можете побачити, цей клас досить незвичний, і це тому, що Tailwind CSS дозволяє нам створювати класи на льоту ось так. Це працює за допомогою існуючого класу, наприклад, padding, який рівний ‘p-’, а потім замість того, щоб використовувати стандартні значення, ми ставимо квадратні дужки і вказуємо значення, яке ми хочемо, наприклад ‘p-[5px]’. ⚠️ Важливо пам’ятати, що якщо довільний клас використовується кілька разів, краще оголосити його в конфігураційному файлі ‘tailwind.config.js’. ## Висновок Як ви бачите, Tailwind CSS — це дуже потужний інструмент, який може заощадити нам багато часу та зусиль. Звісно, є багато іншого, що можна побачити, зокрема як налаштовувати Tailwind CSS, додавати інші фреймворки та використовувати просунуті функції. Усе це ми розглянемо в наступному пості 😎!
Тож підписуйтеся на мене та ставте аплодисменти, якщо вам сподобалося ✨!
GitHub посилання на вихідний код.
Підписуйтеся на мене в LinkedIn! 🎉
Перекладено з: What is, why and how to use Tailwind CSS