Кінцевий посібник із Tailwind CSS: від нуля до освоєння атомарної CSS-рамки

Щоб використовувати Tailwind CSS, спочатку необхідно інтегрувати його у ваш проект. Для сучасних фронтенд-фреймворків (наприклад, React, Vue.js) або генераторів статичних сайтів (наприклад, Next.js, Nuxt.js) офіційно рекомендується використовувати менеджери пакетів (npm, yarn або pnpm) для їх встановлення. Основним пакетом для встановлення є… tailwindcss。

Шляхом виконання npx tailwindcss init Команда дозволяє швидко створити файл конфігурації за замовчуванням. tailwind.config.jsЦей файл є основою для налаштування фреймворка Tailwind CSS. У ньому можна визначити колір теми проекту, точки переходу (breakpoints), шрифти та інші дизайнерські параметри.

Наступним кроком є внесення змін у ваш основний CSS-файл (наприклад, src/styles.cssУ документі зазначено, що це можна зробити шляхом… @tailwind Ці інструкції вводять основні стилі бібліотеки Tailwind CSS. Зазвичай на початку вашого CSS-файлу містяться такі інструкції:

Рекомендуємо до прочитання. Аналіз основних концепцій Tailwind CSS。

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

Наостанок, налаштуйте відповідні плагіни PostCSS у вашому інструменті для компіляції коду (наприклад, Vite чи Webpack), щоб вони обробляли ці інструкції та перетворювали їх на готовий CSS-код. Після виконання цих кроків ви зможете почати використовувати утилітарні класи Tailwind у вашому HTML- чи JSX-коді.

Конструктор вебсайтів WordPress.com

Доступність 99,9991% + аварійне відновлення між регіонами, підтримка 24 години на добу, безкоштовне використання ШІ для створення вебсайтів при покупці пакета блогу.

Безкоштовне доменне ім'я на один рік

Відвідайте веб-сайт конструктора веб-сайтів WordPress.com →

Конструктор веб-сайтів від UltaHost

Понад 900 безкоштовних, налаштовуваних шаблонів, які надають необхідні SEO-можливості для оптимізації пошукової видимості веб-сайтів.

Пропозиція 40%

Перейдіть на сторінку помічника з будівництва веб-сайтів UltaHost →

Ключова ідея: пріоритет надається практичним (функціональним) класам.

Основна філософія Tailwind CSS полягає у пріоритеті використання універсальних (практичних) класів. Це означає, що ви створюєте стилі безпосередньо шляхом комбінації великої кількості невеликих класів, призначених для виконання конкретних функцій, замість того щоб писати традиційний семантичний CSS або постійно перемикатися між HTML- та CSS-файлами.

Наприклад, щоб створити кнопку з синім фоном, білим текстом, внутрішнім маржуванням та круглими кутами, вам потрібно просто додати відповідні класи до HTML-елемента:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  点击我
</button>

Цей підхід значно підвищив ефективність розробки. Вам більше не потрібно вигадувати імена класів для кожного компонента. .btn-primaryКрім того, майже не потрібно виходити за межі HTML/JSX-файлів для написання CSS-коду. Усі стилі чітко видно прямо в мові розмітки, що значно зменшує когнітивне навантаження, пов’язане зі зміною контексту. Водночас, завдяки обов’язковому використанню попередньо визначених дизайнерських правил (колір, відстані, розмір шрифту) природним чином забезпечується послідовність дизайнерської системи.

Кастомізація та налаштування тем

Хоча Tailwind пропонує широкий набір стандартних стилів, кожний проект має унікальні дизайнерські вимоги. Глибоке налаштування здійснюється переважно шляхом зміни цих стандартних стилів. tailwind.config.js Це можна зробити за допомогою файлів.

Рекомендуємо до прочитання. Tailwind CSS 是一个功能优先的 CSS 框架，它。

У цьому конфігураційному файлі ви можете змінити (перевизначити) налаштування, які встановлені за замовчуванням. theme Майже всі значення за замовчуванням можна змінити у розширеному об’єкті. Наприклад, ви можете визначити кольори бренду, встановити співвідношення між елементами, додати власні шрифти чи змінити параметри реагування дизайну на різні

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  // ... 其他配置
}

проходження (законопроект, перевірка тощо) extend Виконавши налаштування, ви зможете зберегти всі значення за замовчуванням Tailwind та додати до них власні параметри – це рекомендований підхід. Після завершення налаштувань ви зможете відразу використовувати створені вами класи. bg-brand-blue 或 w-128。

Крім того, у конфігураційному файлі також можна керувати CSS-класами, які потрібно створити для проекту. Це можна зробити, використовуючи відповідні параметри конфігурації. content У відповідному полі вкажіть шлях до вашого файлу шаблону. Під час компіляції Tailwind виконає статичний аналіз та запакує лише ті стилі, які фактично використовуються, що дозволяє створити мінімізований CSS-файл, готовий до використання в продуктивному середовищі.

Помічник із створення вебсайту від Bluehost.

Надання інструментів для створення вебсайтів із ШІ, цілодобова онлайн-чат і телефонна підтримка, безкоштовний домен на рік, безкоштовний CDN, а також угода про рівень обслуговування (SLA) з гарантованим часом безперервної роботи 99,991 ТП4Т.

Відвідайте Bluehost.

Адаптивний дизайн та інтерактивний стан.

Створення реактивного інтерфейсу, який адаптується до різних розмірів екранів, є основною вимогою фронтенд-розробки. Tailwind використовує стратегію, орієнтовану на мобільні пристрої, та надає відповідні реактивні варіанти для кожного класу

Респонсивні варіанти використовуються шляхом додавання префікса „breakpoint“ перед ім’ям класу-інструменту. Наприклад: md:text-lg、lg:flexTailwind CSS за замовчуванням надає п’ять розмірів елементів (sm, md, lg, xl, 2xl), які відповідають поширеним розмірам екранів. Елемент можна легко налаштувати так, щоб він правильно відображався на різних екранах.

<div class="text-center md:text-left lg:text-2xl">
  Реактивний текст
</div>

Окрім респонсивності, Tailwind також має вбудовану підтримку різних станів взаємодії (псевдокласів). Ви можете налаштувати поведінку елементів під час наведення на них курсора, додавши до їхніх імен певні префіксиhover:фокусування, увагаfocus:Активаціяactive:Стилі, такі як…)

Рекомендуємо до прочитання. Практичний посібник з Tailwind CSS: ефективний підхід до створення сучасних, реагуючих користувацьких інтерфейсів。

<button class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2">
  交互按钮
</button>

Для складних компонентів ви також можете поєднувати різні підходи до їх реалізації. @apply Інструкції для вилучення повторюваних комбінацій інструментальних класів із користувацького CSS є корисними, проте їх використання слід здійснювати обережно, щоб зберегти перевагу принципу “переваги практичних класів”.

підсумок

Tailwind CSS кардинально змінив підхід розробників до написання CSS-коду завдяки своїй системі пріоритетів для використання практичних класів. Завдяки набору повного, налаштовуваного та заснованого на конструктивних принципах дизайну системи, розробники звільняються від необхідності витрачати час на найменування елементів та переключення між різними контекстами, що дозволяє швидко створювати уніфіковані та реагуючі на різні умови користувацькі інтерфейси. Від встановлення та налаштування до розуміння основних принципів роботи цієї системи, а також до глибокої налаштування тем та обробки реагуючих елементів інтерфейсу – оволодіння Tailwind CSS означає отримання ефективного, легкого у обслуговуванні та високо розширюваного інструменту для створення стилів. З розвитком екосистеми Tailwind CSS став невід’ємною частиною сучасного веб-розробництва.

Хостинг.com

Безкоштовний SSL, Cloudflare CDN, WAF, 40+ глобальних центрів обробки даних на вибір, низька затримка, підтримка 24/7/365, тепер ви можете заощадити до 671 ТБ/місяць, підтримка розробки штучного інтелекту та оптимізації SEO.

Відвідайте hosting.com.

Часті запитання

Що робити, якщо виникає конфлікт між пріоритетом практичних класів (utility classes) та специфічністю CSS-стилів?

Практичні класи, створені за допомогою Tailwind, мають однакову специфічність (зазвичай це один і той самий класний селектор); тому правила стилізації повністю залежать від порядку їхнього використання у CSS-файлі. Сам Tailwind генерує CSS у правильному порядку, тому проблем із пріоритетами практично не виникає.

Якщо дійсно потрібно примусово замінити певний стиль, можна скористатися можливостями бібліотеки Tailwind CSS. !important Варіанти, наприклад… bg-red-500 !importantАбо використовуйте власні селектори з більшою специфічністю у налаштуваннях CSS, але це зазвичай означає необхідність перегляду вашої структури стилів.

Як повторно використовувати поширені комбінації інструментальних класів?

Для стилів, які використовуються багато разів у проекті та мають чітке значення (наприклад, кнопки певного дизайну), рекомендується використовувати можливості компонентів JavaScript-фреймворків (таких як React Component чи Vue Component) для їх інкапсуляції.

Інший спосіб – це використовувати цей метод у вашому CSS-файлі. @apply Існує інструкція для вилучення спільних стилів у новий клас. Однак слід пам’ятати, що їх надмірне використання може призвести до погіршення якості коду та збільшення складності його розуміння. @apply Це поверне вас до старих підходів до написання коду на CSS, і ви можете втратити частину переваг, які надає система Tailwind у плані легкості обслуговування коду.

Чи може об’єм CSS-файлів бути досить великим у продуктивному середовищі?

Зовсім ні – саме це є однією з головних переваг Tailwind CSS. Усе можна налаштувати правильно, щоб отримати бажаний результат. tailwind.config.js У файлі content Фільтри та механізми аналізу коду у Tailwind виконують статичний аналіз усіх ваших вказаних шаблонних файлів (HTML, JSX, Vue тощо) та генерують лише ті CSS-класи, які дійсно використовуються під час роботи додатку.

Це означає, що кінцева версія CSS-файлу для використання в продукції буде містити лише ті стилі, які ви самі використовуєте. Зазвичай такий файл можна стиснути до дуже малого розміру (від кількох кілобайт до кількох десятків кілобайт), що значно менше, ніж об’єм CSS-файлу, створеного вручну або завдяки використанню пов

Чи підходить використання цього інструменту разом із існуючими CSS-кодами чи UI-фреймворками?

Tailwind CSS добре поєднується з існуючим CSS-кодом. Ви можете поступово впроваджувати Tailwind на певних сторінках чи компонентах проекту, тоді як інші частини можуть продовжувати використовувати старий стиль.

Однак використання цього інструменту разом з іншими повними фреймворками користувацького інтерфейсу (наприклад, Bootstrap чи Element UI) зазвичай не є гарною ідеєю – адже вони пропонують абсолютно різні системи дизайну та правила найменування класів, що може призвести до конфліктів у стилізації та плутанини. Рекомендується обирати лише один основний підхід до створення стилів у проекті.