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

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

Що таке Tailwind CSS і його основна філософія?

Tailwind CSS Основною філософією цього продукту є принцип “практичність на першому місці”. Це означає, що він не пропонує таких функцій чи можливостей, які не мають практичного значення для користувачів. <code>.card</code> 或 <code>.navbar</code> Такі семантичні компоненти надають можливість користувачеві виконувати певні дії, натомість просто представляючи собою об’єкти для використання. <code>.p-4</code>(Внутрішній маржин)<code>.text-center</code>(Текст розташований по центру.)<code>.bg-blue-500</code>(На синьому тлі) Такі низькорівневі, однорідні за призначенням інструментальні засоби.

Перевага пріоритету практичних класів

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

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

Порівняння з фреймворками бібліотек компонентів

与 Bootstrap 或 Element UI Порівняно з іншими фреймворками…Tailwind CSS Цей інструмент не обмежує вас певним виглядом інтерфейсу. Ви можете вільно комбінувати різні елементи для створення будь-якого візуального дизайну, не докладаючи зусиль для зміни стандартних стилів фреймворку. Це надає розробникам великої гнучкості та контролю, особливо корисно для проектів, які вимагають індивідуального дизайну.

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

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

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

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

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

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

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

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

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

Існує кілька способів, якими можна це зробити. Tailwind CSS Інтегрувати цей продукт у ваш проект. Найкращим способом є використання його офіційного CLI-інструменту або поєднання з інструментами для збірки (наприклад, Jenkins, Gradle тощо). Vite、WebpackІнтеграція.

Встановити за допомогою NPM:

По-перше, ви можете використати npm або yarn для встановлення. Tailwind CSS Та всі пов’язані з ним залежності. Основною командою встановлення є… npm install -D tailwindcssПісля завершення встановлення вам потрібно ініціалізувати конфігураційний файл. Ця команда створить файл під назвою tailwind.config.js Файл.

npm install -D tailwindcss
npx tailwindcss init

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

Наступним кроком є обробка отриманого результату. tailwind.config.js У файлі виконана налаштування. Tailwind CSS Які файли потрібно сканувати для створення кінцевого стилю? Це здійснюється шляхом внесення змін… content Це реалізовано за допомогою відповідних полів (філдів).

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Введення базових стилів

Наостанок, у вашому основному CSS-файлі (наприклад…) src/input.cssУ цьому документі використовується… @tailwind Інструкція щодо введення… Tailwind Різні рівні цього процесу.

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

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Після цього виконайте команду збірки (наприклад, `build`). npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch），Tailwind Відповідно до класів, які фактично використовуються у вашому HTML-файлі, буде створений оптимізований CSS-файл.

Класи основних інструментів та поширені граматичні конструкції

Tailwind CSS Класи інструментів покривають усі аспекти CSS; правила їх найменування інтуїтивно зрозумілі та легко запам’ятовуються.

Відстані та розміри

Класи, які визначають внутрішні та зовнішні маржі (padding) та розміри елементів керування, є дуже зрозумілими у використанні. Наприклад,.m-4 Вираження margin: 1rem;，.p-2 Вираження padding: 0.5rem;Що стосується розмірів,.w-1/2 Позначає ширину 50%..h-64 Вказує висоту у 16 ремах (rem).

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

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

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

<div class="m-4 p-6 bg-gray-100">
  <p class="text-lg">Це контейнер із зовнішнім та внутрішнім маржами (padding).</p>
</div>

Колір та фон

Класи кольорів дотримуються певних правил та стандартів. <code>属性-颜色-深浅</code> Наприклад, це може бути певний режим роботи програми або спосіб виконання певної дії..text-blue-600 Текст, що позначає синій колір..bg-red-100 Позначає фон світло-червоного кольору..border-green-300 Кордон, що позначає зелений колір.

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

Tailwind CSS Респонсивний дизайн ґрунтується на стратегії, яка віддає перевагу мобільним пристроям. За замовчуванням певні класи застосовуються до всіх розмірів екранів, проте для коректної роботи дизайну можуть використовуватися преф md:、lg: Це означає, що ці налаштування будуть дійсні для екранів середнього розміру, великих екранів та екранів більшого розміру.

<div class="text-center md:text-left lg:text-justify">
  На маленькому екрані текст відображається по центру; на середньому екрані – зліва; на великому екрані – по краях.
</div>

Так само ви можете легко додати стани, такі як наведення курсора миші (перемикання на певний елемент) чи фокусування уваги користувача. Наприклад,.hover:bg-blue-700 Фон буде змінений на темно-синій колір при наведенні курсора миші.

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

Розширені функції та налаштування на замовлення

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

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

Щоб уникнути необхідності багаторазового написання довгого рядка класів-інструментів у HTML, ви можете використовувати @apply У CSS виконується вилучення необхідних інструкцій та їх комбінування для створення власних класів компонентів.

Хостинг.com

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

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

/* 在 input.css 中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

<!-- 在 HTML 中 -->
<button class="btn-primary">点击我</button>

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

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

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

Таким чином ви зможете використовувати в проекті власні класи. .text-brand-blue 和 .h-128。

Використовуйте плагіни для розширення функціональності.

Tailwind CSS Має багату екосистему плагінів. Наприклад, плагіни, які надаються офіційно. @tailwindcss/forms Плагіни дозволяють краще налаштовувати стиль елементів форм.@tailwindcss/typography Плагіни можуть надати відмінний стиль за замовчуванням відображеному Markdown-контенту чи контенту з розширеними можливостями (фул-функціональному контенту). Вам потрібно лише встановити плагін та додати його до конфігураційного файлу. plugins Можна використовувати прямо у масиві.

підсумок

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

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

Чи будуть файли CSS, створені за допомогою Tailwind CSS, дуже великими?

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

Чи не зробить написання такої великої кількості імен класів у HTML код незрозумілим та нерозбірливим?

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

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

Tailwind CSS Підтримує ідеальну сумісність з усіма основними фронтенд-фреймворками та бібліотеками. React、Vue.js、Angular、Svelte Імена цих класів є просто рядками, тому їх можна легко прив’язати до шаблонів чи JSX-коду фреймворку. Багато інструментів для створення структур фреймворків (наприклад…) Create React App、ViteУсі ці інструменти мають офіційні або спільнотні рішення щодо їх інтеграції з іншими системами чи сервісами. Tailwind CSS Шаблон для…

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

Ви можете зробити це за допомогою файлу config.yml, який знаходиться у кореневій папці проекту. tailwind.config.js Файли конфігурації можна легко налаштувати відповідно до своїх потреб. theme.extend Додавши нові значення до об’єкта, можна розширити параметри за замовчуванням теми. theme Якщо в об’єкті прямо перевизначається (тобто замінюється) вже існуючий ключ… colors、spacingУ такому випадку можна замінити за замовчуванням налаштування системи. Цей підхід дозволяє вам користуватися зручностями запрограмованої системи та водночас повністю задовольняти вимоги до брендового дизайну та індивідуальних налаштувань.