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

Что такое Tailwind CSS?

В мире веб-разработки постоянно появляются новые CSS-фреймворки, иTailwind CSSОн выделяется своей уникальной концепцией “функциональность прежде всего”. Это не набор интерфейсов с предопределенными компонентами, а набор инструментов, предоставляющих мелкие, низкоуровневые CSS-классы. Разработчики могут комбинировать эти атомизированные CSS-классы (например, <), чтобы создавать собственные интерфейсы.text-center、mt-4、bg-blue-500Можно создавать полностью настраиваемый дизайн непосредственно в HTML. Эта модель полностью изменила подход разработчиков к написанию стилей, переместив принятие решений о стилях из файлов CSS обратно в язык разметки или шаблоны, обеспечив тесную связь между стилями и структурой, что привело к беспрецедентной скорости и гибкости разработки.

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

Как установить и настроить

Чтобы начать использование, выполните следующие шаги:Tailwind CSSВы можете интегрировать его в свой проект различными способами. Самый популярный способ — установка с помощью менеджера пакетов Node.js (например, npm или yarn).

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

Во-первых, инициализируйте npm в корневой папке вашего проекта (если вы этого ещё не сделали), а затем установите его.Tailwind CSSА также все зависимости от него.

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

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

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

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

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

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

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

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

npm install -D tailwindcss
npx tailwindcss init

осуществлятьnpx tailwindcss initКоманда создаст файл под названиемtailwind.config.jsКонфигурационный файл. Этот файл предназначен для настройки.Tailwind CSSЭто сердце проекта. Здесь вы можете определить цветовую тему, шрифт, точки останова, плагины и т. д. Простая конфигурация может выглядеть следующим образом, в которой указано:Tailwind CSSКакие файлы необходимо сканировать для очистки стилей (Purge)?

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

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

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

Наконец, вам потребуется процесс сборки для обработки вышеуказанных директив и их компиляции в окончательный CSS-код. Вы можете использовать для этогоPostCSSСотрудничествоtailwindcssИспользуйте плагин или делайте это напрямую.Tailwind CLIИнструменты. Пример команды сборки с использованием CLI:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Эта команда будет осуществлять мониторинг../src/input.cssИзменения в файлах и вывод компиляции в режиме реального времени../dist/output.cssВам просто нужно добавить ссылку на конечный результат в HTML-код.output.cssПросто предоставьте документы.

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

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

Tailwind CSSМощность этого фреймворка проявляется в его обширной и систематической библиотеке утилитарных классов. Эти классы охватывают практически все распространённые свойства CSS и следуют единым правилам именования.

Макет и расстояния между элементами

Контроль над макетом и интервалами является одной из самых частых операций в повседневной разработке.Tailwind CSSПредоставляется большое количество классов для реализации. Например,flex、gridИспользуется для создания макетов;m-4(Маржа)p-6Паддинг используется для контроля внутренних и внешних отступов. Цифры обычно соответствуют единице rem (по умолчанию кратному 0,25 rem).m-autoЭто означает автоматические поля.

<div class="flex justify-between items-center p-6">
  <div class="m-2">Проект один</div>
  <div class="m-2">Проект два</div>
</div>

Цвет и фон

Система цветов является частью тематизации. Вы можете использовать, например,text-gray-800Настройка цвета текста.bg-blue-500Установите цвет фона.border-red-300Установите цвет рамки. Цифры (от 50 до 900) представляют градацию насыщенности цвета, обеспечивая высокую степень согласованности дизайна.

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

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

Посетите Bluehost

Реактивные точки остановки (responsive breakpoints)

Реализация адаптивного дизайна — этоTailwind CSSЭто одна из сильных сторон Vue. Он по умолчанию предоставляет пять префиксов для точек останова:sm:、md:、lg:、xl:、2xl:Вы можете добавить эти префиксы перед любым практическим классом, чтобы указать, что данный стиль будет применяться при ширине экрана, равной или превышающей определённое значение.

<div class="text-center md:text-left lg:flex">
  <p class="w-full lg:w-1/2">На мобильном телефоне я отображаюсь по центру, на среднем экране — по левому краю, а на большом экране я нахожусь в гибком контейнере, и моя ширина составляет половину экрана.</p>
</div>

Этот подход, ориентированный на мобильные устройства, означает, что стили без префиксов подходят для всех экранов, а стили с префиксами перекрывают стили для более крупных экранов, что делает создание сложных адаптивных макетов чрезвычайно понятным и простым.

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

Давайте объединим все знания, полученные нами ранее, и создадим современный адаптивный карточный компонент. Эта карточка будет включать аватар, заголовок, описательный текст и кнопку для выполнения действий.

Рекомендуемое чтение Введение в Tailwind CSS и практическое руководство по созданию современных адаптивных веб-сайтов.。

Прежде всего, мы создаём основной контейнер для карточек, используя закруглённые углы, тени и внутренние отступы для определения визуальной иерархии карточек.

<div class="max-w-sm rounded-2xl overflow-hidden shadow-lg bg-white p-6">
  <!-- 卡片内容将放在这里 -->
</div>

Далее, внутри контейнера мы создаём гибкую компоновку для размещения аватара и информации о пользователе.

Хостинг.com

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

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

<div class="flex items-center space-x-4 mb-4">
  <img class="w-12 h-12 rounded-full object-cover" src="/avatar.jpg" alt="Аватар пользователя.">
  <div>
    <h3 class="text-xl font-bold text-gray-900">Зань Сань.</h3>
    <p class="text-gray-500">Веб-разработчик</p>
  </div>
</div>

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

<p class="text-gray-700 mb-6">
  Это пример использования<code data-no-auto-translation="">Tailwind CSS</code>Пример создания карточного компонента. Он демонстрирует, как с помощью комбинации утилитарных классов можно быстро реализовать элемент пользовательского интерфейса с хорошим визуальным дизайном и полной адаптивностью.
</p>

Наконец, мы добавляем кнопку. Используем префиксы, отвечающие за адаптивность, чтобы кнопка занимала всю ширину экрана на маленьких устройствах и подстраивалась под содержимое на больших экранах.

<button class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1">
  了解更多
</button>

Объединив весь вышеуказанный код, вы получите полноценный компонент карточки. С помощью настроек можно изменить его внешний вид и функциональность.max-w-smВы можете легко настроить отображение значения внутреннего отступа или префикса точки разрыва на разных устройствах. Этот практический пример наглядно демонстрирует, как это делается.Tailwind CSS“Эффективный рабочий процесс ”Разработка в метках".

резюме

Tailwind CSSЭто не просто фреймворк CSS, это парадигма эффективной и удобной разработки современного веб-стиля. Благодаря его атомизированным практичным классам разработчики могут создавать уникальные пользовательские интерфейсы с поразительной скоростью, сохраняя при этом высокую степень согласованности и управляемости кода. Встроенная система адаптивного дизайна и высоко настраиваемые темы позволяют легко адаптировать сайты для различных устройств и персонализировать их в соответствии с брендом. Хотя на начальном этапе необходимо запомнить несколько названий классов, после их освоения повышение эффективности разработки и снижение нагрузки на мозг становятся несопоставимыми с традиционными методами CSS. Для команд и индивидуальных разработчиков, стремящихся к высокой скорости разработки, свободе дизайна и производительности конечного продукта, это идеальный выбор.Tailwind CSSБез сомнения, это мощный инструмент.

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

Может ли Tailwind CSS привести к увеличению размера HTML-кода?

Действительно, если писать много имён классов непосредственно в HTML, это сделает теги более длинными и сложными. Это...Tailwind CSSНаиболее часто упоминаемые недостатки.

Однако у этого “лишнего кода” есть и свои положительные стороны. Он позволяет тесно связать стиль и структуру, благодаря чему при чтении HTML-кода сразу становится понятно, как выглядит элемент, без необходимости переключаться между файлами HTML и CSS. Для проектов, использующих компонентные фреймворки (такие как React или Vue), эти имена классов заключены внутри компонентов, что фактически повышает удобство обслуживания. Кроме того, благодаря функции очистки (Purge) средств сборки конечное CSS-файл в производственной версии будет очень небольшим и будет содержать только те стили, которые действительно используются, что часто обеспечивает лучшую производительность по сравнению с ручной настройкой или использованием традиционных фреймворков CSS.

Как настроить цвета или интервал темы?

Настраиваемые темы в основном создаются путем изменения файлов, расположенных в корневой папке проекта.tailwind.config.jsЭто можно сделать с помощью конфигурационного файла.

В конфигурационном файлеtheme.extendВ этом разделе вы можете добавить или переопределить значения по умолчанию для темы. Например, чтобы добавить фирменный цвет, можно настроить его следующим образом:

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

После завершения настройок вы сможете использовать эти функции в вашем проекте.bg-brand-blueилиw-128Вот такой настраиваемый класс. Такой подход гарантирует, что ваша система дизайна будет сохранять единообразие на протяжении всего проекта.

Для каких фронтенд-фреймворков он подходит?

Tailwind CSSЭто одна из главных причин его популярности, поскольку он отлично интегрируется практически со всеми современными фронтенд-фреймворками и библиотеками.

В таких компонентных фреймворках, как React, Vue, Angular или Svelte, вы можете использовать классы Tailwind в шаблонах компонентов так же, как в обычном HTML. Инструменты для создания скелетов многих фреймворков (например, Next.js, Vite) предоставляют эту функциональность "из коробки".Tailwind CSSИнтеграционные опции. Кроме того, такие как...@tailwindcss/forms、@tailwindcss/typographyТакие официальные плагины позволяют лучше решать проблемы, связанные с оформлением форм и форматированием контента в формате Rich Text, в определённых ситуациях, что ещё больше улучшает впечатления от разработки в сочетании с различными фреймворками.

Будет ли конечный CSS-файл в производственной среде очень большим?

Не смогу. Именно это и я имел в виду.Tailwind CSSОдно из ключевых преимуществ дизайна. Хотя в версии для разработчиков содержатся все возможные классы, файл имеет больший размер, но это делается исключительно для удобства разработки.

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