Практическое руководство по использованию Tailwind CSS на китайском языке: создание современного реагирующего пользовательского интерфейса с нуля

Что такое Tailwind CSS?

Tailwind CSS – это фреймворк CSS, в котором приоритет отдается функциональности. Он предоставляет набор простых, комбинируемых и удобных в использовании классов, позволяющих разработчикам быстро создавать пользовательский дизайн непосредственно в HTML-коде. В отличие от традиционных CSS-фреймворков, таких как Bootstrap или Bulma, Tailwind не содержит заранее подготовленных компонентов (например, выпадающих меню или навигационных панелей), а вместо этого использует атомарные классы, которые соответствуют отдельным CSS-атрибутам. text-center соответствующий text-align: center;，mt-4 соответствующий margin-top: 1rem;С помощью комбинирования этих классов разработчики могут создавать любой визуальный дизайн без необходимости написания собственного CSS-кода. Это позволяет значительно повысить эффективность разработки при сохранении высокой степени настроек дизайна.

Его основная философия заключается в том, что “ограничения приносят свободу”. С помощью тщательно продуманной системы дизайна (размещение элементов, цвета, размер шрифтов и т. д.) Tailwind обеспечивает единообразие внешнего вида проектов. Кроме того, он позволяет настраивать параметры дизайна с использованием конфигурационных файлов. tailwind.config.js Эту систему дизайна можно полностью настроить под индивидуальные потребности, чтобы она без проблем соответствовала стилю любого бренда. Кроме того, благодаря удалению неиспользуемых стилей производственная версия Tailwind остается очень компактной в размерах, что улучшает время загрузки для конечных пользователей.

Настройка среды и инициализация проекта

Существует несколько способов начать использовать Tailwind CSS: через CDN, с помощью PostCSS или через его командную строковую интерфейсу (CLI). Для современных фронтенд-проектов наиболее рекомендуемым способом является интеграция с PostCSS, поскольку он обеспечивает наиболее полный набор функций и поддержку оптимизации кода для производственной среды.

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

Установка с помощью PostCSS

Во-первых, вам понадобится среда разработки Node.js. Вы можете создать новый проект с помощью npm или yarn и затем установить библиотеку Tailwind. Для нового проекта обычно достаточно использовать npm для установки необходимых пакетов. Вам потребуется установить… tailwindcss Сам по себе, а также… postcss и autoprefixerПотому что Tailwind — это плагин для PostCSS.

Помощник по созданию сайтов WordPress.com

Доступность 99,999% + межрегиональное аварийное восстановление, поддержка 24/7, бесплатный сайт AI Build при покупке пакета для блога

Бесплатное доменное имя на один год

Посетите помощник создателя сайта WordPress.com →

Помощник по созданию сайтов UltaHost

900+ бесплатных настраиваемых шаблонов, которые позволят вам оптимизировать ваш сайт для поисковой выдачи.

Предложение 40%

Посетите помощник по созданию сайтов UltaHost →

npm init -y
npm install -D tailwindcss postcss autoprefixer

Далее выполните следующую команду: npx tailwindcss init Команда для генерации конфигурационного файла Tailwind tailwind.config.jsКроме того, вам также потребуется создать файл конфигурации для PostCSS. postcss.config.jsИ настроить в нем использование библиотеки Tailwind CSS и инструмента autoprefixer.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Внедрение стилей Tailwind CSS

После завершения установки необходимо включить инструкции Tailwind в основной CSS-файл проекта. Обычно этот файл называется… src/styles.css или input.css。

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

@tailwind base Эти инструкции вносят изменения в базовый стиль, предоставляемый библиотекой Tailwind CSS, сбрасывают установленные браузером стандартные настройки стиля и устанавливают ряд основных правил форматирования.@tailwind components Будут внедрены любые данные, которые вы предоставите. @apply Классы пользовательских компонентов, зарегистрированные в инструкциях или конфигурационных файлах.@tailwind utilities Будут включены все полезные классы библиотеки Tailwind.

В конце концов, вам нужно создать этот CSS-файл. Если вы используете инструменты для сборки кода, такие как webpack или Vite, после настройки плагина PostCSS все необходимые операции будут выполняться автоматически. Также вы можете воспользоваться инструментом Tailwind CLI для отслеживания изменений в коде и сборки готового CSS-файла.npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watchПосле завершения создания необходимо включить полученный файл в HTML-код. output.css Вот и всё.

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

Основные полезные классы и реагирующий дизайн (Responsive Design)

Суть Tailwind CSS заключается в его обширной и систематизированной библиотеке полезных стилей (практических классов). Знание правил наймения этих классов является ключом к их эффективному использованию.

Обзор распространенных инструментальных библиотек

Имена классов в Tailwind обычно имеют формат “атрибут-значение”, причем значения определяются в соответствии с масштабом используемой дизайнерской системы (например, 0, 1, 2, 4, 6, 8 и т. д.). Например:
Интервал (Spacing):m-4(margin: 1rem)p-2(padding: 0.5rem)mt-8(margin-top: 2rem);
– Типографика (Typography):text-lgfont-size: 1.125rem;font-bold（font-weight: 700）text-gray-800(Цвет: #2d3748).
Фон и рамка:bg-blue-500(background-color)border，rounded-lg(border-radius: 0.5rem);
Макет (Layout):flex，items-center(align-items: center);justify-betweenjustify-content: space-between;

Реализация реагирующего (адаптивного) дизайна

Tailwind использует стратегию адаптивного дизайна, ориентированную в первую очередь на мобильные устройства. Предустановленные классы предназначены для мобильных экранов (с маленьким размером разрешения). Чтобы добавить стили для более крупных экранов, необходимо использовать реактивные префиксы. md:、lg:、xl:、2xl:。

Конструктор сайтов Bluehost

Предлагает инструмент для создания сайтов с искусственным интеллектом, круглосуточную поддержку в чате и по телефону, бесплатное доменное имя на 1 год, бесплатную CDN, 99,99% uptime SLA

Посетите Bluehost

Эти точки остановки (breakpoints) могут быть использованы в следующих ситуациях: tailwind.config.js Документ был theme.screens Часть элементов можно настроить вручную (персонализировать). Ниже приведен типичный пример стиля реактивного (адаптивного) кнопка:

<button class="text-sm bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 md:text-base lg:py-3 lg:px-6">
  响应式按钮
</button>

В этом примере на мобильных устройствах для кнопок используется мелкий шрифт.text-smНа средних экранах…md:Для размеров экрана 1024 пикселя и более используется базовый размер шрифта.md:text-baseНа большом экране…lg:У него более большой внутренний отступ (padding).lg:py-3 lg:px-6Эффект при наведении курсора на элемент реализуется с помощью… hover: Варианты реализации. Такой подход к написанию реактивной логики в HTML на основе декларативных схем кажется очень интуитивно понятным.

Пользовательские настройки и расширенные способы использования

Сильная сторона Tailwind — его высокая настраиваемость. С помощью конфигурационных файлов вы можете расширить или полностью заменить его стандартные темы.

Рекомендуемое чтение Раскройте мощные возможности Tailwind CSS: полное руководство по фреймворку CSS, ориентированному на практичность.。

Расширение настроек темы

tailwind.config.js Это ядро пользовательских настроек. Вы можете… theme.extend К объекту добавляются новые значения, которые сливаются с значениями изначальной (стандартной) темы, а не заменяют их. Например, можно добавить новый цвет бренда и пользовательский размер межстрочного интервала.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

После завершения настройок вы сможете использовать эти функции в вашем проекте. bg-brand и w-128 Вот такой класс. Он используется в настройках. content Это поле имеет решающее значение: оно указывает, какие файлы должен сканировать инструмент Tailwind для процедуры оптимизации (называемой “tree-shaking”), в ходе которой при создании производственной версии приложения удаляются все неиспользуемые стилевые классы. Благодаря этому CSS-файлы остаются максимально минимизированными по размеру.

Хостинг.com

Бесплатный SSL, Cloudflare CDN, WAF, 40+ глобальных серверных комнат на выбор, низкие задержки рядом с вами, сервисная поддержка 24/7/365, теперь вы можете сэкономить до 67%, поддержка сборки AI и SEO-оптимизации!

Посетите сайт hosting.com

Создание классов компонентов, которые можно использовать повторно

Хотя использование практичных классов непосредственно в HTML и рекомендуется, для сложных комбинаций стилей, которые часто встречаются в проектах, их можно выделить в отдельные компонентные классы. Существует несколько способов это сделать:

1. Использовать @apply Инструкция: В файле CSS вы можете использовать… @apply Создайте новый класс, объединив несколько практических (утилитарных) классов.

    .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">。

2. Использование компонентов на основе JavaScript-фреймворков: В таких фреймворках, как React, Vue или Svelte, рекомендуется объединять и упаковывать все необходимые стили в один переносимый UI-компонент. <Button>Таким образом сохраняется гибкость библиотеки Tailwind, в то же время обеспечивается удобство обслуживания и модульность компонентов.

Кроме того, Tailwind обладает богатой экосистемой плагинов, включая официальные плагины. @tailwindcss/forms(Оптимизация стиля форм)@tailwindcss/typography(Используется для форматирования текста в статьях) Можно дальше расширять его функционал.

резюме

Tailwind CSS радикально изменил способ написания CSS, предоставив набор изящно разработанных атомарных (минимальных по размеру) утилитных классов. Он отказывается от ограничений, связанных с использованием заранее определенных компонентов, предоставляя разработчикам высочайшую гибкость и полный контроль над деталями дизайна. Благодаря принципу разработки, ориентированному на мобильные устройства, мощным возможностям настройки, а также функции автоматического сжатия кода (с использованием технологии “Tree Shaking”), Tailwind CSS идеально подходит для работы как с быстрыми прототипами, так и с крупными производственными проектами. Изучение и освоение правил наймения имен классов может потребовать времени, но как только вы их освоите, вы получите невиданную ранее скорость и согласованность при разработке пользовательских интерфейсов. В сочетании с современными инструментами фронтенда Tailwind CSS является мощным инструментом для создания современных, высокопроизводительных и адаптивных пользовательских интерфейсов.

Часто задаваемые вопросы

У Tailwind много классов, и HTML выглядит запутанным. Что делать в этом случае?

Это действительно распространенная проблема среди новичков. По мере увеличения сложности проектов имена классов в HTML могут становиться слишком длинными. Лучшим способом решения этой проблемы является применение принципов компонентного подхода к разработке. В фреймворках, таких как React и Vue, элементы пользовательского интерфейса следует разбивать на повторно используемые компоненты. Благодаря этому длинные имена классов остаются внутри шаблонов или функций отображения компонентов, а внешний интерфейс компонента остается простым и понятным. <Card>、<Navbar>Кроме того, необходимо использовать ресурсы разумно. @apply Извлечение повторяющихся комбинаций стилей также позволяет сделать HTML более лаконичным.

Увеличит ли использование Tailwind CSS объем готового (пакетированного) кода?

Напротив, Tailwind CSS обычно позволяет значительно сократить размер CSS-файлов, используемых в производственной среде. Ключевым механизмом здесь является так называемая “оптимизация кода”. Правильная настройка этого механизма позволяет улучшить эффективность работы системы. tailwind.config.js В китайском языке content Инструмент по сборке кода Tailwind анализирует файлы вашего проекта (HTML, JSX, Vue и т. д.), выявляет все используемые классы и пакует только эти стили в конечный CSS-файл. Благодаря этому, независимо от размера исходной библиотеки Tailwind, пользователи получают CSS-файл, содержащий только необходимые им стили – его размер обычно составляет от нескольких килобайт до десятков килобайт.

Как изменить стандартную систему цветов или межстрочных отступов в Tailwind CSS?

Это можно сделать, просто внеся необходимые изменения. tailwind.config.js Файл был создан вручную (специально для данного использования). theme.extend При добавлении новых значений в объект происходит расширение используемой по умолчанию темы. Если вы хотите полностью заменить значение определенного ключа темы, то… colors или spacingВ этом случае достаточно просто выполнить действия непосредственно там. theme Ниже (а не…) extend Ниже приведено определение этой клавиши; новое определение полностью заменит значение по умолчанию. Например:theme: { colors: { primary: '#ff0000' } } Будут удалены все предустановленные цвета; останутся только те, которые вы сами определили. primary Цвет.

Для каких библиотек или фреймворков UI лучше всего подходит Tailwind CSS?

Tailwind CSS идеально совместим почти со всеми современными фронтенд-фреймворками, такими как React, Vue, Angular, Svelte, Next.js, Nuxt.js, Gatsby и др. Стили, предоставляемые Tailwind CSS, представлены в виде обычных CSS-классов и не зависят от каких-либо специальных JavaScript-рантаймов. Поэтому его можно использовать в любом месте, где возможно написание HTML-кода. Многие популярные библиотеки пользовательских интерфейсов, такие как Headless UI (официальная библиотека без встроенных стилей) и DaisyUI (библиотека, основанная на Tailwind CSS), разработаны специально для работы с Tailwind CSS, что позволяет легко интегрировать их в проекты и повысить эффективность разработки.