рис. начало/связанные со знаниями/Создание сайтов/Содержание Подробности

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

3-минутное чтение
2026-03-14
2,513
Я получаю комиссионные, когда вы совершаете покупки по ссылкам ниже, без дополнительных затрат для вас.

Что такое Tailwind CSS?

Tailwind CSS — это ориентированный на функциональность CSS-фреймворк, который помогает разработчикам быстро создавать пользовательские интерфейсы, предоставляя набор базовых, комбинируемых утилитарных классов. В отличие от традиционных фреймворков, таких как Bootstrap или Foundation, которые предоставляют готовые компоненты (например, кнопки, карточки),Tailwind CSS Это позволяет вам “собрать” свой дизайн, применяя эти мелкие классы непосредственно в HTML.

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

<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
  点击我
</button>

В этом примере…px-4 и py-2 Были установлены внутренние отступы в горизонтальном и вертикальном направлениях.bg-blue-500 Установлен цвет фона.text-white Я установил цвет текста.rounded-lg Были добавлены большие закруглённые углы. Этот подход значительно ускорил разработку и облегчил обслуживание, поскольку стили тесно связаны со структурой HTML, а имена классов сами по себе являются достаточно понятными.

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

Как начать использовать Tailwind CSS?

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

Помощник по созданию сайтов WordPress.com
Помощник по созданию сайтов WordPress.com
Доступность 99,999% + межрегиональное аварийное восстановление, поддержка 24/7, бесплатный сайт AI Build при покупке пакета для блога
Бесплатное доменное имя на один год
Посетите помощник создателя сайта WordPress.com →
Помощник по созданию сайтов UltaHost
Помощник по созданию сайтов UltaHost
900+ бесплатных настраиваемых шаблонов, которые позволят вам оптимизировать ваш сайт для поисковой выдачи.
Предложение 40%
Посетите помощник по созданию сайтов UltaHost →

Быстрое запуск с помощью Tailwind CLI.

Это самый простой способ, особенно подходящий для обучения и быстрой разработки прототипов. Прежде всего, вам необходимо инициализировать проект с помощью npm или yarn и установить необходимые пакеты. Tailwind CSS。

npm install -D tailwindcss
npx tailwindcss init

Это создаст профиль конфигурации. tailwind.config.jsДалее необходимо создать файл CSS (например, под названием `styles.css`). src/input.cssи добавьте инструкции Tailwind:

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

Затем используйте команду CLI для мониторинга этого CSS-файла и компиляции выходного кода в окончательный CSS-файл.

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

Наконец, вставьте сгенерированный код в свой HTML-файл. output.css После этого вы сможете начать использовать утилитарные классы Tailwind.

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

Интеграция с фронтенд-фреймворками

Tailwind CSS Интеграция с современными фронтенд-фреймворками происходит очень гладко. Например, в проектах Vue или React вы можете выполнить интеграцию с помощью PostCSS. При использовании Create React App вы можете установить:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Это одновременно создаст tailwind.config.js и postcss.config.js Конфигурационный файл. После этого, в файле CSS, являющемся точкой входа в проект (например, <), необходимо внести соответствующие изменения. src/index.cssДобавьте эти три пункта в список. @tailwind Просто выполните инструкции.

Основные концепции и практические классы

Для эффективного использования Tailwind CSSНеобходимо понять основы системы именования практических классов и принципы адаптивного дизайна, лежащие в её основе.

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

Система названий практического назначения.

Tailwind CSS Названия классов соответствуют единому шаблону именования, обычно “атрибут-модификатор-значение”. Например:
Поля:m-4(Все маржи)mt-2(Верхний отступ)
Цвет:text-gray-800，bg-red-300
Размеры:w-64（ширина 16 rem）,h-screen（Высота 100vh）
Планировка:flex，justify-center，items-center

Цифры обычно соответствуют системе дизайна (межстрочный интервал, размер шрифта и т. д.) и по умолчанию основаны на базовой единице в 4 пикселя. Кроме того, они поддерживают варианты состояний, такие как эффект наведения курсора (hover).hover:bg-blue-700Фокус, вниманиеfocus:ring-2Для указания состояния достаточно добавить соответствующий префикс перед именем класса.

Создание отзывчивых макетов

Tailwind CSS Используйте мобильно-ориентированную адаптивную стратегию. Стандартные утилитарные классы предназначены для мобильных устройств, а для применения стилей на больших экранах необходимо использовать адаптивные префиксы. Её система точек перехода включает в себя sm, md, lg, xl, 2xl。

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

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

<div class="w-full md:w-1/2 lg:w-1/4">
  <!-- 内容 -->
</div>

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

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

Практика: Создание реагирующей на размер экрана навигационной панели

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

HTML-структура и стили для мобильных устройств.

Во-первых, мы создаём базовую структуру. На мобильных устройствах навигационная панель обычно состоит из логотипа бренда и кнопки меню в виде гамбургера.

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 品牌标识 -->
      <div class="flex-shrink-0">
        <span class="text-white text-xl font-bold">Мой веб-сайт</span>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button id="menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
          <!-- 汉堡图标 SVG -->
          <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">рис. начало</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">О</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">сервис</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Связаться</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobile-menu" class="hidden md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">рис. начало</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">О</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">сервис</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Связаться</a>
    </div>
  </div>
</nav>

Здесь мы используем… md:hidden и hidden md:block Чтобы контролировать отображение и скрытие различных элементов на настольных и мобильных устройствах.

Добавление интерактивности и настраиваемых параметров.

Для управления разворачиванием и свертыванием меню на мобильных устройствах в панели навигации требуется JavaScript. Добавьте простой скрипт:

<script>
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  menuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });
</script>

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

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3B82F6', // 自定义主色调
        'secondary': '#10B981',
      }
    }
  },
  variants: {},
  plugins: [],
}

После этого вы сможете использовать его в названии класса. bg-primary и text-secondary Готово. С помощью конфигурационного файла вы можете полностью настроить все параметры дизайна, включая интервал, шрифт, точки перерыва и т. д., чтобы они идеально соответствовали вашей системе дизайна бренда.

резюме

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

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

Могут ли CSS-файлы, сгенерированные с помощью Tailwind CSS, быть слишком большими по размеру?

Нет. В производственной среде…Tailwind CSS Используется PurgeCSS (или встроенный движок JIT) для сканирования ваших шаблонов HTML, JavaScript и т. д. и автоматического удаления всех неиспользуемых CSS-классов. В результате получается файл CSS размером всего в несколько килобайт, что намного меньше, чем у многих традиционных фреймворков.

В командных проектах, как обеспечить согласованность стиля?

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

Как настроить стиль компонента или изменить его по умолчанию?

Есть три основных способа. Первый — использовать более конкретные практические классы непосредственно в HTML, что является наиболее распространённым способом. Второй — расширить или переопределить настройки темы в файле конфигурации. Третий — использовать их в файлах CSS. @apply Инструкция объединяет несколько утилитарных классов в один новый класс или позволяет написать собственный CSS-код и использовать его. @layer Инструкция предписывает внедрить его в Tailwind. base、components или utilities В этом слое они контролируют свой приоритет.

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

Tailwind CSS Он отлично интегрируется практически со всеми современными фронтенд-фреймворками, включая React, Vue, Angular, Svelte и т. д. Обычно он используется в качестве базового инструмента для работы со стилями, взаимодействуя с системами компонентов этих фреймворков. Кроме того, существуют библиотеки пользовательского интерфейса, созданные на основе Tailwind, такие как Headless UI (официальная библиотека без стилей для взаимодействия), DaisyUI, Flowbite и т. д. Они предоставляют готовые компоненты, одновременно позволяя вам выполнять глубокую настройку с помощью Tailwind.

Что дальше, что дальше?

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

Расширенное чтение и практические знания

Следующие статьи связаны с темой этой статьи и подходят для дальнейшего углубленного чтения. Зачастую лучше начать с той статьи, которая наиболее близка к вашей текущей проблеме, а затем постепенно переходить к другим темам.

Теги.