Руководство по Tailwind CSS: осваиваем ориентированную на практику платформу CSS с нуля.

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

Что такое Tailwind CSS и какова его основная философия?

Tailwind CSS Основная философия компании — “Приоритет практичности”. Это означает, что она не предлагает таких вещей, как... <code>.card</code> или <code>.navbar</code> Вместо того чтобы предоставлять семантические классы компонентов, такие как <code>.p-4</code>(на внутренних полях),<code>.text-center</code>(Текст выровнен по центру),<code>.bg-blue-500</code>(На синем фоне) Такие низкоуровневые инструменты, предназначенные для одной конкретной цели.

Преимущества практической ориентированности в приоритете.

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

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

Сравнение с фреймворком библиотеки компонентов.

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

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

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

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

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

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

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

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

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

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

Есть несколько способов, как это сделать. Tailwind CSS Интегрируйте его в свой проект. Наиболее рекомендуемый способ — использовать официальный инструмент командной строки или интегрировать его с инструментами сборки, такими как Vite、WebpackИнтеграция.

Установка через NPM

Во-первых, вы можете использовать npm или yarn для установки. Tailwind CSS и связанные с ним зависимости. Основная команда установки выглядит следующим образом: npm install -D tailwindcssПосле завершения установки вам необходимо инициализировать конфигурационный файл. Эта команда создаст файл под названием tailwind.config.js Файл.

npm install -D tailwindcss
npx tailwindcss init

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

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

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

Введение базовых стилей

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

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

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

Затем выполните команду сборки (например, npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch），Tailwind Затем будет создан оптимизированный файл CSS в соответствии с классами, фактически используемыми в вашем HTML-файле.

Основные инструменты и часто используемая синтаксис.

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

Расстояния и размеры

Классы, контролирующие внутренние и внешние отступы и размеры элементов, очень интуитивно понятны. Например,.m-4 Выразите это. margin: 1rem;，.p-2 Выразите это. padding: 0.5rem;Что касается размеров,.w-1/2 Обозначение ширины 50%,.h-64 Укажите высоту в 16 рем.

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

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

Посетите Bluehost

<div class="m-4 p-6 bg-gray-100">
  <p class="text-lg">Это контейнер с внешними и внутренними отступами.</p>
</div>

Цвет и фон

Цветовые категории соблюдаются. <code>属性-颜色-深浅</code> Эта модель. Например,.text-blue-600 Отображает синий текст..bg-red-100 Отображает светло-красный фон..border-green-300 Обозначает зелёную рамку.

Адаптивный дизайн и варианты состояния.

Tailwind CSS Адаптивный дизайн использует стратегию, ориентированную на мобильные устройства. Стандартные классы применяются ко всем размерам экрана, а для добавления префиксов используются такие инструменты, как < md:、lg: Это означает, что они работают на экранах среднего и большого размера и выше.

<div class="text-center md:text-left lg:text-justify">
  Этот текст расположен по центру на маленьких экранах, по левому краю на средних экранах и по краям на больших экранах.
</div>

Также вы можете легко добавить такие состояния, как наведение курсора и фокус. Например,.hover:bg-blue-700 При наведении курсора мыши будет применяться темно-синий фон.

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

Расширенные функции и настраиваемые параметры.

несмотря на то, что Tailwind CSS Он готов к работе сразу после распаковки, но при этом обладает широкими возможностями для расширения и настройки.

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

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

Хостинг.com

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

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

/* 在 input.css 中 */
.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">点击我</button>

Глубоко настраиваемая система дизайна.

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

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

Таким образом, вы сможете использовать в проекте такие пользовательские классы, как .text-brand-blue и .h-128。

Использование плагинов для расширения функционала

Tailwind CSS Имеет обширную экосистему плагинов. Например, официально предоставляемые плагины @tailwindcss/forms Плагины позволяют лучше настраивать стиль элементов формы.@tailwindcss/typography Плагины могут обеспечить красивый стандартный стиль для рендеринга контента в формате Markdown или Rich Text. Вам достаточно установить их и добавить в конфигурационный файл. plugins Его можно использовать в массиве.

резюме

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

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

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

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

Не будет ли код выглядеть запутанным, если писать так много имен классов в HTML?

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

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

Tailwind CSS Он отлично сочетается со всеми основными фреймворками и библиотеками для веб-приложений, включая React、Vue.js、Angular、Svelte И т. д. Имена этих классов представляют собой простые строки, что позволяет легко их привязывать к шаблонам или JSX-коду фреймворков. Многие инструменты для создания структур фреймворков (например…) Create React App、ViteДля всех этих инструментов существуют официальные или сообщественные решения по их интеграции с другими системами. Tailwind CSS Шаблон.

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

Вы можете использовать файлы, расположенные в корневом каталоге проекта. tailwind.config.js Конфигурационный файл можно легко настроить. В theme.extend Можно добавить новые значения в объект, чтобы расширить стандартную тему; в theme Если в объекте прямо перезаписывается уже существующий ключ (например, значение этого ключа изменяется), то изменения будут видны во всех местах, где этот ключ используется. colors、spacingВ этом случае можно заменить стандартную конфигурацию системы. Такой подход позволяет пользователям пользоваться преимуществами предустановленной системы и одновременно полностью удовлетворять потребности в индивидуальной настройке бренда.