Инструкции по CSS Tailwind для CSS Framework

внешний интерфейс CSS
Инструкции по CSS Tailwind для CSS Framework

Это 23-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления

Что такое Tailwind CSS

Tailwind CSS — это ориентированная на функции CSS-инфраструктура, которая интегрируется сflex, pt-4, text-centerа такжеrotate-90Такие классы, их можно комбинировать прямо в скрипте языка разметки для построения любого дизайна.

Как установить Tailwind CSS

Для большинства проектов (и для того, чтобы воспользоваться возможностями настройки Tailwind) вам потребуется установить Tailwind и его зависимости через npm. Установить Tailwind через npm

npm install tailwindcss@latest postcss@latest autoprefixer@latest

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

Если вы интегрируете Tailwind с инструментами, которые зависят от более старых версий PostCSS, вы можете увидеть такие ошибки, как:

Error: PostCSS plugin tailwindcss requires PostCSS 8.

В этом случае следует установитьPostCSS 7Версия совместимости.

CSS-функции попутного ветра

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

  • Отзывчивый дизайн. Создавайте адаптивные пользовательские интерфейсы, используя адаптивные функциональные варианты. Каждый класс функций в Tailwind можно условно применять к разным контрольным точкам, что позволяет легко создавать сложные адаптивные интерфейсы, не выходя из HTML.

  • Наведение, фокус и другие состояния: используйте функциональные классы для стилизации элементов при наведении, фокусе и других состояниях.

  • Добавьте новый класс пространственных объектов: Расширьте Tailwind с помощью собственного класса пространственных объектов.

  • Функции и директивы: ссылки на функции и директивы, которые Tailwind предоставляет вашему CSS.

Основные стили Tailwind CSS

Preflight: произвольный набор базовых стилей для пресетов проекта Tailwind.

Preflight, основанный на modern-normalize , представляет собой набор базовых стилей для проектов Tailwind, предназначенных для устранения несоответствий между браузерами и облегчения работы в рамках ограничений системы дизайна.

Когда вы включаете базу @tailwind в свой CSS, Tailwind автоматически вставляет следующие стили:

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

Как использовать Tailwind CSS (В качестве примера возьмем таблицу)

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

Class Properties
border-collapse border-collapse: collapse;
border-separate border-collapse: separate;

Collapse

Когда это возможно, используйте border-collapse, чтобы свернуть границы смежных ячеек в одну границу. Обратите внимание, что это включает в себя свертывание верхнего слоя<table>граница на этикетке.

1629704393(1).jpg

<table class="border-collapse border border-green-800 ...">
  <thead>
    <tr>
      <th class="border border-green-600 ...">State</th>
      <th class="border border-green-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-green-600 ...">Indiana</td>
      <td class="border border-green-600 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Ohio</td>
      <td class="border border-green-600 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Michigan</td>
      <td class="border border-green-600 ...">Detroit</td>
    </tr>
  </tbody>
</table>

Separate

Используйте border-separate, чтобы заставить каждую ячейку отображать свою собственную границу.

1629704738(1).jpg

<table class="border-separate border border-green-800 ...">
  <thead>
    <tr>
      <th class="border border-green-600 ...">State</th>
      <th class="border border-green-600 ...">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-green-600 ...">Indiana</td>
      <td class="border border-green-600 ...">Indianapolis</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Ohio</td>
      <td class="border border-green-600 ...">Columbus</td>
    </tr>
    <tr>
      <td class="border border-green-600 ...">Michigan</td>
      <td class="border border-green-600 ...">Detroit</td>
    </tr>
  </tbody>
</table>
Категории