Керівництво з початкового вивчення Tailwind CSS: створення сучасних адаптивних веб-сторінок від нуля до одного.

Що таке Tailwind CSS?

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

Його основна філософія полягає у принципі “практичність на першому місці”. Це означає, що вам немає потреби… .css У файлі можна записати велику кількість власних стилів, і вам не доведеться турбуватися про семантику імен класів. Натомість ви можете використовувати такі інструменти, як… text-blue-500、p-4、rounded-lg Використання описових імен класів дозволяє швидко застосовувати стилі. Цей підхід значно прискорює процес створення користувацького інтерфейсу та зберігає стилішники компактними, оскільки він базується на інструментах для розробки PurgeCSSМожна легко видалити невикористані стилі, що дозволяє отримати в кінцевому результаті дуже компактний файл для використання в продуктивному середовищі.

Як почати користуватися Tailwind CSS?

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

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

Встановіть основні пакети за допомогою npm.

Спочатку вам потрібно ініціалізувати проект (якщо він ще не ініціалізований), а потім встановити необхідні залежності за допомогою npm або yarn. Основним командою встановлення є: npm install -D tailwindcss postcss autoprefixerОсь тут.postcss 和 autoprefixer Це необхідний інструмент для роботи з CSS.

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

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

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

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

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

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

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

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

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

Налаштування PostCSS та введення базових стилів

Далі вам потрібно буде змінити конфігураційний файл PostCSS (який зазвичай знаходиться у папці `config`). postcss.config.jsДодати це до tailwindcss 和 autoprefixer Як плагін… Нарешті, у вашому основному CSS-файлі (наприклад… src/styles.css 或 input.cssУ цьому випадку, за допомогою @tailwind Введення команд (Instruction Introduction) Tailwind CSS Різні шари.

Типовий вміст основного CSS-файлу виглядає наступним чином:

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

Ці три рядки інструкцій відповідно вводять базові стилі (скидаються зміни, встановлені браузером за замовчуванням), класи компонентів (використовуються для об’єднання повторюваних корисних стилів) та всі корисні стилі.

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

Основні поняття та практична граматика

Оволодіти Tailwind CSS Ключ до успішного використання цих інструментів полягає у розумінні правил найменування класів та методів реагійного дизайну (responsive design).

Правила найменування практичних (функціональних) елементів

Tailwind CSS Назви класів дотримуються певних умовностей, які роблять їх зрозумілими для користувачів. Більшість назв класів складаються з скорочень атрибутів та їх значень, які з’єднані крапкою. Наприклад:
* m-4 Вираження margin: 1rem; (4 є одиницею в масштабі відстаней.)
* p-2 Вираження padding: 0.5rem;。
* text-center Вираження text-align: center;。
* bg-blue-600 Позначає, що колір фону є кольором з палітри синіх відтінків, який має номер 600.
* hover:bg-blue-700 Означає, що функція буде застосована при наведенні курсора миші на відповідний елемент інтерфейсу. bg-blue-700 Стиль.

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

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

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

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

Реактивний дизайн та префікси точок зупинки (breakpoint prefixes)

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

Серед вбудованих префіксів для точок зупинки (breakpoints) є:
* sm: (640 пікселів)
* md: (768 пікселів)
* lg: (1024 пікселі)
* xl: (1280 пікселів)
* 2xl: (1536 пікселі)

Наприклад,<div class="text-sm md:text-base lg:text-lg"> Це означає, що розмір шрифту на мобільних пристроях встановлений як „малий“; на пристроях з середнім розміром екрана шрифт автоматично змінюється на „стандартний“, а на пристроях з великим розміром екрана – на „великий“. Ви можете ц tailwind.config.js Для файлів theme.screens Частина цих значень точок зупинки можна легко налаштувати відповідно до ваших потреб.

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

Створення респонсивного компонента у вигляді картки

Давайте застосуємо вищезгадані концепції на практиці, створивши просту респонсивну картку за допомогою повного прикладу.

Створення HTML-структури та базового стилю

Ми створимо картку, яка буде містити зображення, заголовок, опис та кнопку. Спочатку ми використаємо класи для організації вмісту. max-w-sm Обмежте максимальну ширину карток, застосуйте заокруглені краї, тіні та механізм приховування вмісту, що виходить за межі картки, щоб визначити їх базовий вигляд.

Хостинг.com

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

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

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8">
  <img class="w-full h-48 object-cover" src="/img/card-image.jpg" alt="Зображення до картки">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Карточка практичного використання Tailwind CSS</div>
    <p class="text-gray-700 text-base">
      Це респонсивний компонент у вигляді картки, створений швидко за допомогою практичних класів Tailwind CSS. Для отримання естетичного інтерфейсу не потрібно писати жодного рядка власного CSS-коду.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
      Дізнайтеся більше.
    </button>
  </div>
</div>

Додати реактивні (адаптивні до розмірів екрана) інтерактивні ефекти

Зараз ми додамо до карт реактивні (адаптивні до розмірів екрана) властивості. Ми хочемо, щоб на великих екранах макет карт змінювався, а кнопки надавали більш яскраві та зрозумілі інтерактивні сигнали (повідомлення про натискання).

Ми змінили зовнішній контейнер картки та кнопки:

<div class="max-w-sm md:max-w-md lg:max-w-lg rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8 hover:shadow-2xl transition-shadow duration-300">
  <!-- 图片和内容部分保持不变 -->
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 transform hover:-translate-y-1 hover:scale-105">
      Дізнайтеся більше.
    </button>
  </div>
</div>

• Ми додали елементи до зовнішнього контейнера. md:max-w-md 和 lg:max-w-lgЗавдяки цьому картки поступово розширюються на різних точках переривання.
• Додано. hover:shadow-2xl 和 transition-shadow Реалізація анімації тіні при наведенні курсора миші.
• Додано кнопки. transform、hover:-translate-y-1 和 hover:scale-105Забезпечити ефект незначного підйому та збільшення зображення при наведенні на нього курсора миші.

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

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

Використовуйте PurgeCSS для видалення невикористовуваних стилів.

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

Ось приклад базової конфігурації:

// tailwind.config.js
module.exports = {
  content: [‘./src/**/*.{html,js,jsx,ts,tsx,vue}’], // 根据你的项目结构调整
  theme: {
    extend: {},
  },
  plugins: [],
}

Розширення та налаштування токенів дизайну

Ви можете це зробити в tailwind.config.js 的 theme.extend Деякі з параметрів за замовчуванням можна легко розширити. Наприклад, можна додати власний колір або нове значення відстані між елементами інтерфейсу.

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1a365d’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
  },
}

Після цього ви зможете використовувати цей матеріал у вашому проекті. bg-brand-blue 或 h-128 Ось такий клас. Цей спосіб налаштування гарантує, що ваша система дизайну буде сумісною з… Tailwind CSS Процеси роботи безперешкодно поєднуються між собою.

підсумок

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

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

Чи може використання Tailwind CSS призвести до того, що HTML-код виглядатиме незрозумілим чи непослідовним?

Це справді поширена турбота. Накопичення великої кількості імен класів у HTML спочатку може здаватися безладним. Проте багато розробників вважають, що це певний компроміс: переміщення рішень щодо стилізації з CSS-файлів у самі елементи коду насправді підвищує читабельність та зручність обслуговування коду, адже ви можете безпосередньо бачити всі стилівні налаштування елемента, не переходячи між різними файлами. Крім того, для повторюваних компонентів можна використовувати спеціальні практики для кращого організаці @apply У CSS використовуються інструкції для вилучення спільних класів, або ж поєднання з компонентними фреймворками (наприклад, React, Vue) з метою підтримання чистоти та організованості шаблонів.

Як перевизначити або додати стилі, яких немає у бібліотеці Tailwind CSS?

Щодо повністю власних стилів, у вас є кілька варіантів. По-перше, ви можете… tailwind.config.js Для розширення теми цей підхід є першим варіантом. Як альтернативу, ви можете зробити це у вашому CSS-файлі. @tailwind utilities; Після вказівки можна написати будь-який власний CSS-код. Нарешті, для окремого стилю можна використовувати вирази у дужках для інлайнового задання будь-яких значень. Наприклад: top-[117px] 或 bg-[#1a365d]Це забезпечує велику гнучкість у використанні.

Яким є продуктивність CSS-фреймворку Tailwind?

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

З якими фреймворками чи технологіями воно підходить для використання?

Tailwind CSS Цей інструмент не залежить від конкретних фреймворків та ідеально поєднується з будь-якими технологіями, які підтримують HTML та CSS. Він особливо популярний у поєднанні з сучасними фреймворками та метафреймворками, такими як React, Vue.js, Angular, Next.js, Nuxt.js, Svelte тощо. Його підхід, заснований на використанні практичних класів, добре доповнює компонентний підхід цих фреймворків.