Повний посібник з вивчення CSS-фреймворку Tailwind: створення сучасних, реагівних інтерфейсів з нуля

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

Що таке Tailwind CSS?

Tailwind CSS Це CSS-фреймворк, який робить акцент на функціональності; він містить велику кількість таких елементів, як… flex、pt-4、text-center 和 rotate-90 Такі класи можна безпосередньо використовувати у вашому HTML-коді, що дозволяє швидко створювати власні дизайни.

Основна філософія: практичність на першому місці

Традиційний CSS або фреймивки компонентів (наприклад, Bootstrap) вимагають, щоб ви створювали семантичні імена класів для елементів. .btn-primaryПотім визначте стилі цих класів у файлі CSS.Tailwind CSS Натомість використовується протилежний підхід: цей фреймворк надає велику кількість класів, які представляють окремі CSS-атрибути. Наприклад, щоб створити велику синю кнопку, яка розташовується по центру екрана, вам достатньо написати<button class="px-6 py-3 bg-blue-600 text-white font-bold rounded-lg">按钮</button>Перевагою цього підходу є те, що вам немає потреби виходити за межі HTML-файлу для налаштування стилів, а всі стилі походять з контрольованої системи дизайну (розміри відступів, кольори, розміри шрифтів тощо).

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

Основні переваги та сценарії використання

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

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

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

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

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

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

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

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

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

Налаштування середовища та базова конфігурація

Почніть користуватися. Tailwind CSS Існує кілька способів, але найбільш рекомендованим є використання її командного рядка (CLI) або інтеграція з інструментами для збирання коду (наприклад, Vite, Webpack).

Швидке ініціалізування за допомогою npm та CLI

Спочатку, у кореневому каталозі вашого проекту ініціалізуйте та встановіть необхідні залежності за допомогою npm. Tailwind CSS。

npm init -y
npm install -D tailwindcss
npx tailwindcss init

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

Вказати шлях до файлу шаблону конфігурації

Щоб забезпечити… Tailwind Щоб програма могла сканувати ваш HTML-файл та генерувати відповідний стиль, вам знадобиться використовувати відповідні інструменти чи фреймворки. Наприклад, для цього можуть підійти такі технології, як CSS (Cascading Style Sheets) чи JavaScript. Ц tailwind.config.js Конфігурація в середині… content Поле.

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ця конфігурація вказує… Tailwind Підійдіть та скануйте. src Виберіть усі файли у каталозі з вказаними розширеннями та вилучіть з них використовувані класи інструментів.

Введіть інструкції щодо базового стилю.

Далі, у вашому основному CSS-файлі (наприклад, ): src/input.css 或 src/styles.cssУ цьому документі використовується… @tailwind Інструкція має містити необхідні дані чи дії, які потрібно виконати. Tailwind Різні шари.

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

Наостанок, запустіть процес збірки за допомогою команди CLI, відстежуйте зміни у файлах та отримайте готовий CSS-код.

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

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

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

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Тепер ви можете включити генерований код у HTML-документ. ./dist/output.css Файл було завантажено, і почалося використання інструментальних класів.

Основні практичні аспекти та адаптивний дизайн.

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

Огляд поширених інструментальних класів

• Макетування та еластичні блоки (Layout and Flexible Boxes):flex, grid, block, hidden
• Відстань між елементами:m-4(Маржа), p-4(Внутрішній маржин). Ці числа зазвичай відповідають певному співвідношенню дизайнерського зазору (наприклад, 4 означає 1rem).
• Розміри:w-64(Ширина: 64 * 0.25rem), h-screen(Висота 100vh)
• Верстка:text-lg(Розмір шрифту), font-bold(Шрифтовий розмір), text-center(Вирівнювання)
• Колір:bg-gray-100(Колір фону), text-blue-500(Колір тексту), border-red-300(Колір рамки)
• Межі та заокруглені кути:border, rounded-lg, rounded-full
• Позиціонування:relative, absolute, top-0, right-0

Реалізація реактивного дизайну (реактивного макету)

Tailwind Респонсивний дизайн ґрунтується на стратегії, яка віддає перевагу мобільним пристроям. За замовчуванням інструментальні класи призначені для роботи з мобільними пристроями; для більших розмірів екранів необхідно додавати
* sm: (640 пікселів)
* md: (768 пікселів)
* lg: (1024 пікселі)
* xl: (1280 пікселів)
* 2xl: (1536 пікселі)

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

Наприклад, макет, який на мобільних пристроях відображається у вигляді стека елементів, а на екранах середнього розміру та більших – у вигляді рядка елементів, можна реалізувати наступним чином:

<div class="flex flex-col md:flex-row">
  <div class="p-4 md:w-1/2">Зміст з лівої сторони.</div>
  <div class="p-4 md:w-1/2">Зміст праворуч</div>
</div>

Варіанти стану та стилі взаємодії

Tailwind Надано широкий спектр префіксів для обробки різних станів елементів.
* 悬停：hover:bg-blue-700
* 焦点：focus:outline-none focus:ring-2
* 激活：active:scale-95
* 禁用：disabled:opacity-50

Хостинг.com

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

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

Ці варіанти можна комбінувати між собою, що дозволяє легко створювати інтерфейсні елементи з насиченими інтерактивними ефектами та зворотним зв’язком від користувача.

Посилені техніки та найкращі практики

Зі зростанням масштабів проекту володіння деякими продвинутими техніками допоможе вам краще керувати ним. Tailwind CSS。

Вилучення та повторне використання класів компонентів

Хоча Tailwind Рекомендується використовувати інструментальні класи безпосередньо в HTML. Однак для складних блоків стилів, які повторюються в проекті, можна застосовувати певні підходи для їх оптимізації. @apply Ця інструкція використовується для створення власного CSS-класу. Це зазвичай робиться для… components Рівень завершений.

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

@layer components {
  .btn-primary {
    @apply px-6 py-3 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200;
  }
}

Потім ви зможете використовувати це в HTML. <button class="btn-primary"> Гаразд. Однак слід пам’ятати, що надмірне використання може призвести до певних негативних наслідків. @apply Це може відхилятися від початкової мети, яка полягала у пріоритеті практичності, тому слід використовувати цей підхід з обережністю.

Глибоко налаштована система дизайну.

tailwind.config.js Файл є центром вашого дизайну. Ви можете тут розширювати або повністю замінювати стандартні налаштування теми.

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      },
      fontFamily: {
        'sans': ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Після визначення ви зможете використовувати щось на кшталт… bg-brand-blue、h-128 和 font-sans Ось такий користувацький клас.

Оптимізація продуктивності: виробниче збирання (Performance Optimization: Production Building)

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

NODE_ENV=production npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

Ця команда буде виконуватися відповідно до заданих умов. content Налаштувати скановані HTML-файли та шаблони так, щоб збереглися лише класи, які фактично використовуються, а CSS-файли були стиснуті.

підсумок

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

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

Чи може використання Tailwind CSS зробити HTML-код надмірно громіздким (незграбним у вигляді)?

Дійсно, використання Tailwind CSS Після цього відбувається обробка HTML-елементів… class Атрибути можуть ставати дуже довгими. Їхні прихильники називають цей підхід “інтеграцією стилів” („style inlining“). Хоча цей підхід може здаватися громіздким, він тісно поєднує стилі та структуру коду, що усуває необхідність пошуку та найменування CSS-класів. У практичному розробництві це підвищує читабельність та зручність обслуговування коду, адже ви одразу бачите, як виглядає стиль конкретного елемента. Для дуже складних @apply Компоненти для вилучення команд, або інструменти, які поєднуються з фронтенд-фреймворками для їх керування.

У чому різниця між Tailwind CSS та Bootstrap?

Філософії обох підходів суттєво відрізняються.Bootstrap Це фреймворк, який надає компоненти з попередньо налаштованими стилями (наприклад, навігаційні панелі, карти, модальні вікна). Ви в основному використовуєте семантичні класи для налаштування вигляду цих компонентів. btn btn-primaryЩоб використовувати ці компоненти та здійснювати налаштування, необхідно перевизначити відповідні CSS-змінні або написати власний CSS-код.Tailwind CSS У такому випадку не надаються жодні попередньо налаштовані компоненти; натомість пропонуються базові класи-інструменти, які дозволяють створювати абсолютно унікальні компоненти з нуля. Кастомізація здійснюється за допомогою конфіTailwind Це забезпечує більшу гнучкість та свободу дизайну. Bootstrap Це забезпечує швидший досвід використання продукту “готового до використання” („out of the box“).

Як використовувати власні шрифти чи бібліотеки ікон від сторонніх розробників у Tailwind CSS?

Щодо власних шрифтів, спочатку необхідно їх визначити у HTML-коді. <link> 或 @font-face Завантажте файл з шрифтом, а потім… tailwind.config.js 的 theme.extend.fontFamily Додайте частину своєї сім’ї шрифтів. Після цього їх можна буде використовувати. font-{name} Гаразд. Для іконок з бібліотек (наприклад, Font Awesome, Heroicons) зазвичай достатньо просто виконати інструкції щодо їх встановлення та інтегрувати їх у проект.Tailwind Сам по собі цей інструмент не обробляє іконки, але офіційно надано можливість їх використання. @tailwindcss/forms Існують додаткові плагіни, які допомагають краще налаштовувати стиль форм. Іконки зазвичай використовуються у вигляді окремих файлів SVG або шрифтів.

Як зберегти однорідність використання фреймворку Tailwind CSS у командному проекті?

Tailwind CSS Сама по собі система дизайну забезпечує дотримання єдиної стилістики завдяки таким елементам, як пропорції між елементами інтерфейсу, палітра кольорів, точки переривання роботи тощо. Для кращої співпраці в команді ці можливості слід пов tailwind.config.js У цьому файлі визначаються колір бренду проекту, власні параметри відступів між елементами дизайну, шрифти тощо, щоб усі учасники команди використовували однакові дизайнерські стандарти. Крім того, можна встановити командні правила: наприклад, заохочувати використання певних стилів дизайну, які використовуються @apply Варто вилучити цей код у окремі компоненти класів або інкапсулювати його у Vue/React-компоненти. Використання плагінів автодоповнення редакторів та уніфікованих інструментів форматування коду (наприклад, плагіна Tailwind CSS для Prettier) також значно підвищить ефективність співпраці.