Головна сторінка/Знання/Створення вебсайту./Детальна інформація про зміст.

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

Читання за 3 хвилини.
2026-03-13
2,940
Я заробляю комісію, коли ви робите покупки за посиланнями нижче, без додаткових витрат для вас.

Що таке Tailwind CSS?

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

Головна перевага полягає в тому, що він усуває залежність від налаштованого CSS. Вам більше не потрібно ламати голову над тим, як назвати клас для кнопки, картки або навігаційної панелі, а також не потрібно турбуватися про конфлікти стилів. Наприклад, щоб створити кнопку з закругленими краями, синім фоном, білим текстом і внутрішніми відступами, достатньо написати:<button class=“rounded bg-blue-500 text-white p-4”>按钮</button>Цей спосіб розробки значно підвищує швидкість і узгодженість створення користувацького інтерфейсу, а за допомогою таких інструментів, як PurgeCSS (що входить до складу движка оптимізації Tailwind v3 і новіших версій), можна автоматично видалити невикористані стилі, в результаті чого отриманий файл CSS буде набагато компактнішим.

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

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

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

Швидка установка за допомогою npm та командного рядка.

Найбільш рекомендований спосіб — це встановлення за допомогою npm і використання його інструментів командного рядка для ініціалізації. По-перше, встановіть Tailwind та його залежності, виконавши наступну команду в терміналі у кореневій теці вашого проекту:

Конструктор вебсайтів WordPress.com
Конструктор вебсайтів WordPress.com
Доступність 99,9991% + аварійне відновлення між регіонами, підтримка 24 години на добу, безкоштовне використання ШІ для створення вебсайтів при покупці пакета блогу.
Безкоштовне доменне ім'я на один рік
Відвідайте веб-сайт конструктора веб-сайтів WordPress.com →
Конструктор веб-сайтів від UltaHost
Конструктор веб-сайтів від UltaHost
Понад 900 безкоштовних, налаштовуваних шаблонів, які надають необхідні SEO-можливості для оптимізації пошукової видимості веб-сайтів.
Пропозиція 40%
Перейдіть на сторінку помічника з будівництва веб-сайтів UltaHost → 
npm install -D tailwindcss
npx tailwindcss init

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

Налаштування конфігураційного файлу Tailwind.

Згенерований tailwind.config.js Початковий вміст файлу дуже простий. Для того, щоб Tailwind міг сканувати ваші HTML-файли та видаляти невикористані стилі, вам необхідно налаштувати content Поля. Наприклад, у типовому проекті Vue або React конфігурація може виглядати наступним чином:

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

Ця конфігурація наказує Tailwind сканувати. src Усі файли з зазначеними розширеннями у каталозі та класи інструментів, витягнуті з них.

Додайте базовий стиль до проекту.

Після установки та налаштування вам потрібно буде включити всі шари Tailwind у кореневий CSS-файл проекту. Зазвичай, ви створюєте файл під назвою src/styles.css 或 src/index.css Открийте файл і додайте наступні інструкції:

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

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

@tailwind base Це були базові стилі Tailwind, які використовувались для скидання стандартних стилів і забезпечення узгодженої базової структури.@tailwind components Будуть додані компоненти, що поставляються з Tailwind (наприклад, контейнери), а також ті, які ви додали самі. @apply Клас компонента, зареєстрований в директиві.@tailwind utilities Потім вводяться всі функціональні класи, що є найважливішою частиною.

Нарешті, переконайтеся, що ваш процес збірки (наприклад, з використанням Vite, Webpack) може обробляти цей файл CSS або через команду CLI. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Здійснюйте компіляцію в режимі реального часу.

Детальний опис основних функціональних класів Tailwind CSS.

Tailwind CSS Інструменти охоплюють всі атрибути CSS, такі як розташування, інтервал, форматування, колір, облямівка, ефекти тощо. Правила їхньої назви дуже зрозумілі і зазвичай дотримуються наступного формату: 属性{方向？}-{尺寸} Ця модель.

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

Контроль відстані та розмірів.

Тейлвінд використовує уніфіковану систему числових пропорцій для контролю внутрішніх і зовнішніх відступів, ширини та висоти. Наприклад,p-4 Вираження padding: 1rem(За замовчуванням 1 одиниця = 0,25 рем),m-2 Вираження margin: 0.5remВи можете використати px-、py-、pt-、pr- Для визначення конкретного напрямку використовуються такі префікси, як left-, right-, up-, down-, front-, back-. Щодо розмірів,w-64 Вираження width: 16rem，h-screen Вираження height: 100vhЦя узгодженість робить розміщення та вирівнювання елементів інтерфейсу надзвичайно простим і акуратним.

Колір і стиль фону

Tailwind пропонує ретельно розроблену палітру кольорів, кожен з яких має різні відтінки від 50 до 900. Класи кольорів позначаються такими назвами, як text-blue-600(Колір тексту),bg-gray-100(Колір фону),border-red-300Ви можете одразу застосувати (колір рамки). Також ви можете легко застосувати градієнтний фон, наприклад, bg-gradient-to-r from-cyan-500 to-blue-500 Відображає лінійний градієнт від зеленого до синього кольору зліва направо.

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

Адаптивний дизайн Tailwind базується на принципі “мобільність на першому місці”. Кожен функціональний клас за замовчуванням розроблений для мобільних пристроїв.Щоб застосувати стилі для більших розмірів екрану, необхідно додати відповідний адаптивний префікс. Наприклад,text-center md:text-left lg:text-2xl Це означає, що текст буде вирівняний по центру на мобільних пристроях із середнім розміром екрану.md:Зліва вирівняно та вище, на великому екрані (lg:А для розмірів шрифту більших ніж 12, використовуйте наступний код: \nfont-size: larger; 1.5rem。

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

Опрацювання стану взаємодії також є простим. Ви можете використовувати префікси, такі як hover:、focus:、active: Щоб додати стиль різним станам. Наприклад,<button class=“bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 …”> Ви можете легко реалізувати ефекти зависання та фокусування, не пишучи жодного коду на CSS.

Практичне завдання: створити компонент картки за допомогою Tailwind CSS.

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

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

По-перше, ми створюємо каркас HTML-структури картки та застосовуємо основні класи розміщення та контейнерів:

<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="“https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600”" alt="“Технологічні продукти”">
  <!-- 内容区域 -->
  <div class="“px-6" py-4”>
    <div class="“font-bold" text-xl mb-2 text-gray-800”>Приклад використання Tailwind CSS у реальних проектах</div>
    <p class="“text-gray-600" text-base”>
      Навчіться швидко створювати сучасні користувацькі інтерфейси, які є красивими, узгодженими та високопродуктивними, за допомогою інструментів атомізації. Немає необхідності перемикатися між різними файлами — зосередьтеся на самому дизайні.
    </p>
  </div>
  <!-- 标签区域 -->
  <div class="“px-6" pt-2 pb-4”>
    <span class="“inline-block" bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”>Франктура #CSS</span>
    <span class="“inline-block" bg-green-100 text-green-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># фронт-енд розробка</span>
    <span class="“inline-block" bg-purple-100 text-purple-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># реагує на стимули.</span>
  </div>
  <!-- 行动按钮 -->
  <div class="“px-6" pb-6”>
    <button class="“w-full" bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50”>
      Прочитайте негайно.
    </button>
  </div>
</div>

Аналіз структури та стилю картки.

У цій картці ми використали багато інструментальних класів. Зовнішній контейнер використаний у max-w-sm Щоб обмежити максимальну ширину,rounded-xl Реалізувати великі закруглені кути,shadow-lg Були додані більш глибокі тіні, щоб створити ефект об'єму.bg-white Встановіть білий фон,mx-auto Зробити так, щоб він був вирівняний по горизонталі.

Зона для зображень пройдена. h-48 Встановлено висоту, і використовується object-cover Переконайтеся, що зображення обрізано і заповнює весь простір. Внутрішні відступи в області контенту визначаються за допомогою px-6 py-4 Контроль. Заголовок виділено жирним шрифтом (font-bold), великий шрифт (text-xlВідокремлює текст від верхнього та нижнього країв сторінки.mb-2）。

Цей тег використовує інлайн-блоки (inline-block) у поєднанні з кольором фону, кольором тексту та заокругленими краями (rounded-fullі невеликий внутрішній відступ (px-3 py-1Щоб досягти стилю капсули, ми використали анімацію. Кнопки мають градієнтний фон.bg-gradient-to-r）、 зависання з плавним переходом кольорів ( )hover:from-、hover:to-), перехідні анімації (transition duration-300і фокусне кільце (focus:ring-2такі як високоякісні ефекти.

Зробити компонент картки адаптивним.

Щоб картинки краще відображалися на великих екранах, ми можемо легко додати кілька класів із відповідною адаптацією. Наприклад, ми хочемо, щоб вони добре виглядали на середньорозмірних екранах (md:І вище, картки можуть бути розташовані горизонтально, із зображенням зліва і текстом справа. Ми можемо трохи змінити зовнішню структуру та категорії зображень і тексту:

<div class="“max-w-4xl" md:flex rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <img class="“md:w-1/3" w-full h-48 md:h-auto object-cover” src="“…”" alt="“…”">
  <div class="“md:w-2/3" p-6 md:p-8”>
    <!-- 标题、描述、标签、按钮等内容 -->
  </div>
</div>

Шляхом додавання md:flex Зробіть контейнер Flex-розкладом на середньому екрані і використовуйте md:w-1/3 和 md:w-2/3 Контролюйте співвідношення ширини і висоти зображень і контентних областей. Зображення мають бути md:h-auto Зробіть його високоадаптивним, зону вмісту md:p-8 Це збільшило внутрішні відступи під великим екраном. Для створення адаптивної картки потрібно лише внести кілька змін до класів.

підсумок

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

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

Яка різниця між Tailwind CSS та вбудованими стилями?

Tailwind CSS суттєво відрізняється від вбудованих стилів. Вбудовані стилі (style=””Атрибути не можуть використовуватися для реалізації адаптивного дизайну за допомогою медіа-запитів, а також для обробки стану псевдокласу, наприклад :hover 或 :focusКрім того, вбудовані стилі перекривають усі інші стилі, не маючи жодних обмежень.

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

У великих проектах, якщо назви класів у HTML є занадто довгими, це може призвести до плутанини. Як з цим впоратися?

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

Наприклад, ви можете витягти набір складних кнопок у клас CSS-компонента:

.btn-primary {
  @apply w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50;
}

А потім просто використовуйте його в HTML. <button class=“btn-primary”>Кращий підхід — створити його у React. <Button> Компонент, або створення компонента у Vue <MyButton> Компоненти, які інкапсулюють стилі всередині компонента, допомагають зберегти простоту шаблону.

Як Tailwind CSS оптимізує розмір кінцевого файлу CSS?

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

Він буде робити це відповідно до того, що ви вказали у конфігураційному файлі. tailwind.config.js 的 content Він сканує всі файли шаблонів (такі як .html, .jsx, .vue), визначає назви класів інструментів, які ви фактично використовуєте, а потім повністю видаляє всі невикористані стилі з кінцевого файлу CSS. Цей процес є високооптимізованим, і зазвичай розмір кінцевого файлу CSS зменшується до 10 КБ або навіть менше, що забезпечує відмінну продуктивність.

Чи можна налаштувати стандартну систему дизайну Tailwind на власний розсуд?

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

Ви можете це зробити в theme.extend Ви можете розширити стандартну тему об'єкта, наприклад, додавши нові кольори, значення інтервалів, розміри шрифтів або розриви. Ви також можете це зробити в theme Ви можете напряму перекрити певні частини стандартної теми. Наприклад, ви можете налаштувати основний колір і точки розриву таким чином:

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1992d4’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
    screens: {
      ‘tablet’: ‘640px’,
      ‘laptop’: ‘1024px’,
      ‘desktop’: ‘1280px’,
    },
  },
}

Таким чином, ви зможете використати це у своєму проекті. bg-brand-blue、w-128 І я теж. tablet: Ось такий користувацький клас.

Наступний крок, що робити далі?

Якщо ви хочете швидко створити вебсайт, наступним кроком буде продовжити порівняння можливостей шаблонів, розширюваності та витрат на подальше обслуговування різних платформ для створення вебсайтів.

Для подальшого читання та практичних знань

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

Цитата: Теги: