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

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

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

начать использоватьTailwind CSSПервый шаг в использовании данного инструмента – его интеграция в ваш проект. Наиболее рекомендуемыми способами являются использование официального CLI-инструмента или его совмещение с существующими инструментами для сборки кода (например, Vite или Webpack).

Быстрая установка с помощью NPM и CLI

Для большинства проектов наиболее эффективным способом является установка и инициализация с помощью npm. Сначала выполните команду в терминале в корневом каталоге проекта для его установки.Tailwind CSSА также все зависимости от него.

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

npm install -D tailwindcss
npx tailwindcss init

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

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

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

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

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

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

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

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

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

Путь к файлу шаблона конфигурации

Далее необходимо выполнить редактирование.tailwind.config.jsФайл…contentВ атрибутах указывается путь к файлу вашей шаблонной проектной структуры. Это обеспечивает корректное функционирование системы.TailwindКомпилятор с функцией JIT-обработки (JIT-энжин) способен определить все файлы, в которых используются соответствующие утилитарные классы, и генерировать только необходимый CSS-код.

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

Введите базовые инструкции по стилю.

Наконец, в вашем основном CSS-файле (например…src/styles.cssилиsrc/index.cssВ этом примере используется@tailwindИнструкция должна включать в себя необходимые элементы или действия.TailwindВсе уровни (layers)…

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

Теперь запустите.npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watchКомандаTailwindСистема начнёт отслеживать изменения в исходных файлах и в реальном времени будет компилировать их в CSS-файлы, предназначенные для использования в производственной среде.

Основные полезные классы и механизмы создания пользовательского интерфейса (layout construction)

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

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

Расстояния между элементами, верстка и система цветов

TailwindБыл предоставлен стандартный масштаб пропорций расстояний, основанный на единице rem, а также полный набор инструментов для верстки. Например,p-4Означает, что внутренний отступ (padding) составляет 1рем.mt-2Это означает, что верхний внешний маржин (margin-top) равен 0.5рем. Для текста вы можете использовать соответствующие стили для задания формата отступов.text-lgЧтобы настроить использование крупного шрифта, используйте следующие инструменты или методы:font-bold来加粗，使用text-gray-800Давайте настроим цвет текста на темно-серый.

Цветовая система особенно мощна: у каждого цвета предусмотрен диапазон оттенков от 50 до 900. Например,bg-blue-500Означает, что цвет фона должен быть синим среднего оттенка.hover:bg-blue-600Это означает, что цвет элемента изменится на более темно-синий при наведении курсора мыши.

Использование технологий Flexbox и Grid для организации элементов на странице

构建页面布局是TailwindСильные стороны… Через…flexиgridС помощью соответствующих классов можно быстро создавать различные сложные макеты (лей아уты).

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

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

Посетите Bluehost

<div class="flex flex-col md:flex-row">
  <aside class="w-full md:w-1/4 p-6 bg-gray-100">
    <!-- 侧边栏内容 -->
  </aside>
  <main class="w-full md:w-3/4 p-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- 网格卡片内容 -->
      <div class="bg-white rounded-lg shadow p-4">Карточка 1</div>
      <div class="bg-white rounded-lg shadow p-4">Карточка 2</div>
      <div class="bg-white rounded-lg shadow p-4">Карточка 3</div>
    </div>
  </main>
</div>

В приведённом примере мы создали эластичный контейнер, который по умолчанию располагается вертикально, а на экранах среднего размера переходит в горизонтальное положение. Основная область содержимого оформлена с использованием технологии CSS Grid; количество столбцов в этой области изменяется в зависимости от размера экрана (1 столбец на маленьких экранах, 2 столбца на средних экранах, 3 столбца на больших экранах). Кроме того, между элементами контента соблюдается единый интервал.gap-6）。

Реализация реагирующего дизайна и интерактивных элементов пользовательского интерфейса

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

Система точек остановки, ориентированная на мобильные устройства

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

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

Например.text-center sm:text-leftЭто означает, что текст должен отображаться в центре экрана на устройствах с маленьким размером экрана и более маленьких.smТекст, размещённый на элементах с размером изображения 640 пикселей и более, выравнивается по левому краю.

Обработка наведения, фокуса и т. д.

TailwindС помощью префиксов, обозначающих варианты состояний, вы можете легко создавать стили для различных состояний интерактивных элементов. Распространенные префиксы включают:hover:、focus:、active:、disabled:и т.д.

Хостинг.com

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

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

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50 transition duration-150 ease-in-out">
  点击我
</button>

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

Индивидуальная настройка и оптимизация производства.

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

Расширение и переопределение тем (Extending and Overriding Topics)

Вtailwind.config.jsДокумент былtheme.extendВ объекте вы можете добавлять новые значения или изменять параметры по умолчанию (тематические настройки), такие как цвета, шрифты, пропорции между элементами, и при этом это не повлияет на функционирование основных компонентов системы.TailwindЗначение по умолчанию.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      fontFamily: {
        'sans': ['"Inter"', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Таким образом, вы сможете использовать это в вашем проекте.bg-brand-primaryилиfont-sansВот такой пользовательский класс.

Удалить неиспользуемые стили

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

NODE_ENV=production npx tailwindcss -i ./src/styles.css -o ./dist/output.css --minify

пользоваться--minifyСимволы (или маркеры) могут помочь дополнительно сжать размеры выходного CSS-файла.

резюме

Tailwind CSSБлагодаря своей ориентированной на эффективность методологии этот инструмент радикально изменил способ, которым разработчики создают CSS-код. Он устраняет необходимость постоянного переключения между HTML- и CSS-файлами, снижая тем самым временные затраты на обработку данных. Система ограничений, присущая этому инструменту, обеспечивает согласованность стилей во всем проекте. Кроме того, мощные функции реагирования на разные устройства и управления состоянием интерфейса делают создание современных, адаптивных и интерактивных пользовательских интерфейсов чрезвычайно эффективным. Овладение этим инструментом позволяет разработчикам полностью контролировать весь процесс создания пользовательских интерфейсов — от настройки среды разработки и использования базовых классов до реализации реагирования интерфейса на разные уTailwind CSSЭто означает, что у вас есть полный набор инструментов, позволяющих справляться с различными задачами, связанными с созданием пользовательских интерфейсов на переднем крае (frontend). Хотя изучение этих инструментов требует запоминания большого количества имен классов, как только вы с ними освоитесь, скорость разработки и удобство обслуживания кода значительно улучшатся.

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

Приводит ли Tailwind CSS к тому, что HTML-код становится громоздким и запутанным?

Это довольно распространенная опасение. Действительно, в HTML встречается множество имен классов, но это обычно рассматривается как необходимость, сопровождающаяся определенными компромиссами.Tailwind CSS将样式决策从CSS文件转移到了HTML模板中，这实际上提高了可读性，因为你一眼就能看出一个元素的外观。对于复杂的类列表，可以使用模板语法（如React的className、Vue的:class）进行组合和管理，或者提取为可复用的组件，从而保持模板的整洁。

Как переопределить стили компонентов от сторонних разработчиков, используемые в проекте, на основе фреймворка Tailwind CSS?

Когда вам необходимо заменить содержимое элемента, использующего определенный стиль или функционал…TailwindПри настройке стилей сторонних компонентов классов существует несколько способов. Самый прямой из них — использование более конкретных имен классов в вашем HTML-коде или шаблонах, чтобы воспользоваться специфичностью правил CSS. Другой подход заключается в применении…!importantВариант: добавьте это после имени класса.!importantНапримерbg-red-500!Более рекомендуемый способ — это использование вашего…tailwind.config.jsВ данном случае для конкретных компонентов можно увеличить их специфичность с точки зрения CSS-стилей, либо изменить их внешний вид, назначив им пользовательские классы при их использовании. Для этого компоненты могут быть обернуты в отдельные элементы кода и переданы вместе с соответствующими классами.

С какими JavaScript-фреймворками подходит использование Tailwind CSS?

Tailwind CSSЭто решение не зависит от конкретной фреймворки и может идеально сочетаться с любым технологическим стеком, поддерживающим CSS и HTML. В настоящее время оно обладает высокой степенью интеграции и поддержки со стороны сообществ в таких популярных фреймворках, как React, Vue.js, Angular, Svelte, Next.js, Nuxt.js, Gatsby и других. Кроме того, официально предоставляются специальные плагины для некоторых фреймворков (например, Next.js), которые улучшают процесс разработки.

Увеличат ли пользовательские значения стилей общий размер генерируемого CSS-кода?

Оно не будет увеличиваться бесконечно. Благодаря…Tailwind CSSВ режиме Just-in-Time (JIT) CSS-классы генерируются и включаются в конечный CSS-файл только в том случае, если они действительно используются в вашем проектном шаблоне. Даже если вы определили в конфигурационных файлах множество пользовательских цветов, значений для расстояний между элементами или параметров шрифтов, эти классы не будут добавлены в CSS-файл, если вы не упомянете их в коде HTML.bg-my-custom-colorВ этом случае эти стили не будут отображаться в выходном файле.Tailwind CSSКлючевой механизм, обеспечивающий минимальные размеры производственных пакетов.