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

В современной сфере фронтенд-разработки, где стремятся к эффективности разработки и согласованности дизайна,Tailwind CSS Оно выделяется своей уникальной концепцией Utility-First. Это не традиционный фреймворк, предлагающий готовые кнопки или карточные компоненты, а набор утилитарных классов. Разработчики могут быстро создавать любые пользовательские дизайны непосредственно в HTML, комбинируя эти гранулированные классы, без необходимости постоянно переключаться между файлами CSS и HTML, что значительно ускоряет процесс разработки и создания прототипов. Его основные преимущества заключаются в высокой степени настраиваемости, удобной реализации адаптивного дизайна и использовании PurgeCSS (теперь известного как Tailwind CSS). @tailwindcss/jit Или встроенная функция очистки автоматически удаляет неиспользуемые стили, в результате чего создается очень небольшой файл CSS для производственной среды.

Основные понятия и установка/настройка.

Чтобы понять. Tailwind CSSПрежде всего необходимо освоить философию “Приоритет практичности”. Это означает, что стиль применяется с помощью ряда классов с единой функциональностью, например, text-blue-500 \nИспользуется для настройки синего текста,p-4 Используется для установки внутренних отступов.flex Используется для включения макета Flexbox. С помощью комбинации этих классов можно создавать сложные визуальные дизайны.

Инициализация и установка проекта.

начать использовать Tailwind CSS Существует несколько способов, но наиболее рекомендуемый — установить его в качестве плагина PostCSS через npm или yarn, что позволит разблокировать все его настраиваемые функции. Сначала необходимо инициализировать проект через командную строку и установить зависимости.

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

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

Эта команда создаст один tailwind.config.js Конфигурационный файл и один postcss.config.js Документы (если необходимо). Далее, в вашем основном CSS-файле (например, ). src/styles.cssВ этом примере мы вводим команду Tailwind в код.

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

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

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

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

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

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

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

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

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

Наконец, настройте PostCSS в процессе сборки для обработки этого файла или используйте Finally, configure PostCSS in the build process to handle this file, or use it directly. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Дайте команду на выполнение компиляции в режиме реального времени.

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

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

Базовый стиль и макет.

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

<div class="bg-white shadow-md rounded-lg p-6 flex items-center">
  <img class="w-16 h-16 rounded-full mr-4" src="avatar.jpg" alt="Аватар.">
  <div>
    <h2 class="text-xl font-bold text-gray-800">Зань Сань.</h2>
    <p class="text-gray-600">Веб-разработчик</p>
  </div>
</div>

Здесь,bg-white Установите цвет фона.shadow-md Добавьте средний оттенок теней.rounded-lg Установите большие закруглённые углы.p-6 Установите внутренний отступ в 1,5 рема.flex и items-center Было реализовано вертикальное центрированное расположение с помощью Flexbox.

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

Реализовать адаптивные точки перелома.

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

<div class="text-center p-4 bg-blue-100 md:bg-green-100 lg:bg-yellow-100">
  <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold">Отзывчивые заголовки.</h1>
  <p class="mt-2 text-gray-700">На мобильных устройствах фон имеет светло-синий цвет, на устройствах со средним экраном — светло-зелёный, а на устройствах с большим экраном — светло-жёлтый.</p>
</div>

Это означает, что по умолчанию (на мобильных устройствах) фон имеет светло-синий цвет.bg-blue-100) ; когда ширина экрана достигает md Когда достигается точка останова (768 пикселей), фон становится светло-зелёным; при достижении lg Когда достигается точка перелома (1024 пикселя), фон становится светло-жёлтым. Размер шрифта заголовка также увеличивается по мере увеличения размера экрана.

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

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

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

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

Посетите Bluehost

Токены, разработанные на заказ.

tailwind.config.js Документы являются основой кастомизации. Здесь вы можете изменить или заменить цвета темы, шрифты, интервалы, точки перехода и т. д.

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
  plugins: [],
}

После определения вы сможете использовать его в проекте. text-brand-blue или p-84 Вот такой настраиваемый класс. В конфигурационном файле content Поля очень важны, они указывают, Tailwind CSS Какие файлы следует просканировать для удаления стилей?

Извлечение компонентов и использование плагинов.

Чтобы избежать повторения длинных списков классов в HTML, вы можете использовать такие методы: @apply Инструкция по извлечению общих стилей в CSS и созданию классов пользовательских компонентов.

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

.btn-primary {
  @apply py-2 px-4 bg-brand-blue 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;
}

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

Лучшие практики по созданию производственной среды.

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

Хостинг.com

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

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

Настройте параметр "Очистка".

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

module.exports = {
  content: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  // ... 其他配置
}

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

Рекомендации по оптимизации производительности.

Помимо очистки стилей, можно рассмотреть следующие оптимизации: включить сжатие CSS (например, с помощью cssnano), использовать CDN для загрузки шрифтовых иконок, а также воспользоваться особенностями наследования и каскадирования в браузере, чтобы уменьшить количество ненужных вложенных классов. Для проектов, использующих фреймворки JavaScript (например, React, Vue), важно убедиться, что строки классов, создаваемые динамически, не содержат лишних символов. text-${color}-500Это полностью включено в content В процессе установки или при использовании опции "Список безопасных приложений" (safelist) можно предотвратить неправильное удаление этих динамических классов.

резюме

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

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

Не приводит ли Tailwind CSS к увеличению объёма HTML-кода?

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

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

Чтобы обеспечить согласованность, команда должна совместно поддерживать и соблюдать установленные правила. tailwind.config.js Они определяют дизайн-токи (цвет, расстояние между элементами, размер шрифта и т. д.). Можно разработать правила кодирования и согласовать схему извлечения часто используемых стилей (например, когда использовать <). @apply Также, используя интеллектуальный подсказчик Tailwind CSS в редакторе и инструменты форматирования кода (например, плагин Tailwind для Prettier), можно автоматически сортировать имена классов, унифицировать стиль написания и уменьшить количество разногласий.

Может ли Tailwind CSS совместим с существующими CSS или UI-фреймворками?

Это совместимо.Tailwind CSS Дизайн является неинвазивным. Вы можете одновременно использовать в проекте как утилитарные классы Tailwind, так и свой собственный традиционный CSS или стили других интерфейсных фреймворков (например, Bootstrap). Чтобы избежать конфликтов стилей, необходимо обращать внимание на порядок загрузки CSS и специфичность селекторов. Обычно рекомендуется использовать Tailwind вместе с другими фреймворками, такими как Bootstrap. base Слой расположен впереди, потому что он включает в себя сброс стилей. На практике чаще всего существующие проекты переносятся в Tailwind поэтапно, а не используются одновременно несколько фреймворков.

Как добавить пользовательские утилитарные классы в Tailwind CSS?

Существует два основных способа добавления пользовательских удобных классов. Первый способ заключается в… tailwind.config.js Документ был theme.extend Некоторые части можно расширить, например, добавив пользовательские цвета или интервалы, что автоматически приведёт к генерации соответствующих имён классов. Второй способ — написать свой собственный файл CSS и использовать его. @layer Инструкция внедряет стиль в Tailwind. utilities Это позволит вашему пользовательскому классу также использовать преимущества адаптивных точек перехода и вариантов состояния Tailwind, таких как hover:Система.