Навчаємо вас крок за кроком, як швидко створювати сучасні адаптивні веб-сторінки за допомогою Tailwind CSS.

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

为什么选择 Tailwind CSS

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

Дуже висока ефективність розробки

За допомогою Tailwind CSS вам немає потреби постійно перемикатися між файлами HTML та CSS. Усі стилі прямо назначаються елементам HTML за допомогою імен класів. Наприклад, щоб створити кнопку з внутрішнім відступом, синім фоном та кутовими заокругленнями, вам достатньо написати: <button class="px-4 py-2 bg-blue-500 rounded-lg">按钮</button>Цей тип робочого процесу позбавляє необхідності думати про назви класів та пошук відповідних правил CSS, що робить створення інтерфейсів швидким та зрозумілим, подібно до складання конструктора з блоків.

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

Вбудована підтримка реактивного дизайну

Створення реактивних веб-сторінок є сильною стороною фреймворку Tailwind CSS. У фреймворку вбудовані реактивні префікси, які базуються на поширених точках розділення екранів (breakpoints). sm:、md:、lg:、xl: 和 2xl:Ви можете додавати ці префікси перед будь-якими класами, щоб вказати, що відповідний стиль буде застосовуватися при певній ширині екрана. Це значно спрощує створення складних реактивних макетів, а код стає більш зрозумілим та легким для читання.

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

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

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

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

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

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

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

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

Високі можливості налаштування

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

Надзвичайна продуктивність виробництва

Tailwind CSS використовує PurgeCSS; ця функція є вбудованою у версії Tailwind CSS 2.1 та новіші. purge Цей інструмент дозволяє сканувати ваш HTML-код, компоненти на JavaScript, а також всі файли-шаблони та автоматично видаляти всі невикористовувані елементи CSS-стилю. Це забезпечує, що готовий файл CSS для продуктивного середовища має дуже малий розмір – зазвичай кілька тисяч байтів – що значно прискорює завантаження сторінок.

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

Існує кілька способів почати використовувати Tailwind CSS, але найбільш рекомендованим є інтеграція за допомогою плагіна PostCSS – це забезпечує найкращу продуктивність та досвід розробки.

Встановіть за допомогою npm:

Спочатку використовуйте npm або yarn, щоб ініціалізувати проект та встановити Tailwind CSS разом із всіма необхідними залежностями.

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

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

npx tailwindcss init Команда створить за замовчуванням… tailwind.config.js Конфігураційний файл.

Налаштування PostCSS

Створіть файл у кореневому каталозі проекту. postcss.config.js Файл, а також додайте Tailwind CSS та Autoprefixer як плагіни.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Впровадження стилів Tailwind

Створіть CSS-файл, наприклад… src/styles.cssІ використовуйте @tailwind Інструкції для вставки базових стилів, класів компонентів та інструментальних класів з бібліотеки Tailwind.

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

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

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

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

Наостанок, імпортуйте цей скомпільований CSS-файл у ваш HTML-файл або завантажте його у ваш основний JavaScript-файл (якщо ви використовуєте інструменти збірки коду, такі як webpack або Vite).

Посібник з використання основних практичних класів

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

Макет та відстані між елементами інтерфейсу

Класи, які використовуються для керування макетом та відстанями між елементами, дуже зрозумілі у використанні. Наприклад,flex、grid Використовується для створення моделей візуального оформлення;m-4 Означає, що відступ зовнішнього краю елемента становить 1 рем (rem – відстань, визначена від розміру шрифту основного тексту).p-4 Встановлює внутрішній відступ у розмірі 1 рем. Напрямок можна вказати за допомогою t(Верхня частина).r(Праворуч),b(Нижче),l(Ліворуч),x(Горизонтально),yВикористовується для вказівки вертикального положення, наприклад… mt-2、px-4。

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

Колір та фон

Назви класів кольорів зазвичай складаються з префікса атрибута та значення кольору. Наприклад,bg-gray-100 Встановіть колір фону,text-blue-600 Встановіть колір тексту,border-red-300 Встановіть колір рамки. Чим більший номер, тим зазвичай темніший колір. Ви також можете налаштувати свій власний палітр кольорів у конфігураційному файлі.

Верстка та розміри

Використовуйте для керування стилем тексту відповідні інструменти чи налаштування. text-{size}(Наприклад…) text-lg）、font-{weight}(Наприклад…) font-boldВикористовуйте параметри для керування розмірами. w-(Ширина) і h-Прикметник, що використовується як префікс для позначення висоти, наприклад: w-64 Означає, що ширина становить 16 елементів регулярної метри (rem).

Хостинг.com

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

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

Респонсивність та стани взаємодії

Як згадувалося раніше, достатньо додати респонсивний префікс. Крім того, Tailwind також надає можливість використовувати різні варіанти вигляду елементів інтерфейсу (стани елементів). hover:、focus:、active:Це дозволяє вам легко визначати стани взаємодії елементів. Наприклад:hover:bg-blue-700 Колі курсор миші знаходиться над елементом, колір фону змінюється.

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

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

Створення HTML-структури

Спочатку ми створюємо базову HTML-структуру навігаційної панелі.

<nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 左侧Logo和品牌 -->
      <div class="flex items-center">
        <div class="text-white font-bold text-xl">Мій бренд</div>
        <!-- 桌面端导航链接 -->
        <div class="hidden md:block ml-10">
          <div class="flex space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Головна сторінка</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Щодо…</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">послуга</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md">Зв’язатися</a>
          </div>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="text-gray-400 hover:text-white">
          <!-- 汉堡菜单图标 (简化版) -->
          <span class="block w-6 h-0.5 bg-white mb-1"></span>
          <span class="block w-6 h-0.5 bg-white mb-1"></span>
          <span class="block w-6 h-0.5 bg-white"></span>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 (默认隐藏) -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">Головна сторінка</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">Щодо…</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">послуга</a>
      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md">Зв’язатися</a>
    </div>
  </div>
</nav>

Аналіз стилів та логіки реагування на зміни розмірів екрана

У цьому прикладі ми використали кілька ключових класів:
* hidden md:blockКонтейнер навігаційних посилань для десктопної версії програми за замовчуванням прихований на мобільних пристроях та відображається на екранах середнього розміру (розмір md) та більших.
* md:hiddenМеню-перемикачі на мобільних пристроях приховуються на екранах середнього розміру та більших.
* flex、justify-between、items-centerВикористовуйте Flexbox для горизонтального розташування елементів та їх вирівнювання.
* max-w-7xl mx-autoВирівняйте вміст навігації по центру екрана та обмежіть її максимальну ширину.
* hover:bg-gray-700Визначення стану миші під час наведення курсора.

Щоб реалізувати перемикання мобільного меню, вам знадобиться додатковий JavaScript-код для виконання цього процесу. id="mobile-menu" На div-елементі… hidden Класи. Це демонструє, як Tailwind безперешкодно взаємодіє з JavaScript.

підсумок

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

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

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

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

Як перевизначити або додати власні стилі?

Існують два основні способи. По-перше, ви можете… tailwind.config.js Для файлів theme.extend Деякі розширення передбачають зміни у стандартних темах – наприклад, додавання нових кольорів чи значень відстаней між елементами. Крім того, для повністю власних, одноразових стилів ви можете використовувати відповідні правила у вашому CSS-файлі @tailwind utilities; Після виконання вказівок можна написати традиційний CSS-код або скористатися фреймворком Tailwind. @apply У CSS інструкції використовуються для вбудовування корисних класів (utility classes).

З якими фронтенд-фреймворками найкраще використовувати Tailwind CSS?

Tailwind CSS ідеально інтегрується з усіма популярними фронтенд-фреймворками та бібліотеками, такими як React, Vue.js, Angular, Svelte тощо. Офіційно також надаються спеціальні інструменти та плагіни для React та Vue. @headlessui/react Надаються безголові (headless) компоненти користувацького інтерфейсу. У таких метафреймах, як Next.js та Nuxt.js, Tailwind CSS також є найпопулярнішим варіантом стилізації.

Як оптимізувати розмір файлів CSS-файлів, створених за допомогою фреймворку Tailwind CSS, у продуктивному середовищі?

Оптимізація відбувається автоматично. Вам потрібно… tailwind.config.js Файл налаштований правильно. content Опції (у старій версії) purgeВкажіть шлях до файлів HTML, шаблонів та JavaScript, які містять необхідний код. Під час створення продукційної версії Tailwind проаналізує ці файли та включить до кінцевого CSS-файлу лише ті стилеві класи, які будуть використовуватися, що дозволяє отримати максимально компактний файл.