Объясните простыми словами tailwindcss

CSS
Объясните простыми словами tailwindcss

задний план

Недавно вышел vue3, а ie11 пока не поддерживается.Последний инструмент vite также начал использовать нативный импорт ES-модулей, а к концу года ie11 тоже перестанет поддерживаться.browselistсостояние; какой должна быть структура, которая будет вести css в будущем?

Случайно я увидел видео о другом CSS-фреймворке, Tailwind.css, который делает все лучше. Может пора попробовать.

На самом деле, когда я обновлял библиотеку ui до vue3, я собирался заменить ее на lerna, но один из скинов не мог придумать, как ее отвязать.

Начните с демонстрации, чтобы узнать, как использовать tailwindcss.

Простая разработка модуля

tailwindcss-demo

реализация html/css

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img
      class="chat-notification-logo"
      src="/img/logo.svg"
      alt="ChitChat Logo"
    />
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Реализовано с помощью tailwindcss, сначала введите tailwindcss

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

и изменить код стиля

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">
      You have a new message!
    </p>
  </div>
</div>

Длинный код мгновенно упрощается

основная идея

Класс полезности (сначала полезность)

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

В прошлом на самом деле были проекты, которые я бы определил, такие какalign-content: center,для.center, но другие элементы могут быть определены как.text-center

Это самое большое преимущество функциональных классов:

  • Вы не тратите усилия на имена классов.
  • Ваш файл CSS перестает расти
  • Глобальная модификация стала проще

Конфигурация, соответствующая попутному ветру,@tailwind utilities;

кстати вот@tailwind baseНа самом деле этоnormalize.css, и некоторые другиераспределение по умолчанию,а также@tailwind componentкомпонент попутного ветра, который, как я понимаю, должен быть пустым (не проверено)

Отзывчивый дизайн

Используя синтаксис точки останова для реализации функции @media, эта операция просто против неба.В прошлом мне приходилось писать много стилей @media, но теперь это можно сделать, добавив префикс.

<!-- 默认长度是16, medium screens 是32,large screens 是48 -->
<img class="w-16 md:w-32 lg:w-48" src="..." />

w-16 соответствует ширине: 4rem, 32 соответствует 8rem...

По умолчанию адаптивный префикс можно использовать с большинством функциональных классов.

псевдокласс

Поддерживает теги префикса псевдокласса и может использоваться с реактивным

<button
  class="bg-orange-500 hover:bg-orange-600 sm:bg-green-500 sm:hover:bg-green-600"
>
  Hover me
</button>

нестандартный стиль

Поскольку tailwind является низкоуровневой структурой, существующей утилиты, базы и компонента по умолчанию tailwindcss недостаточно для удовлетворения всех сценариев;

С помощью директивы @layer Tailwind автоматически переместит эти стили в@tailwind base,@tailwind utility,@tailwind componentпозиция

Например, мы хотим сделать компонент кнопки и доработать соответствующий стиль:

@layer components {
  .btn-blue {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
  .btn-blue:hover {
    @apply bg-blue-700;
  }
}

Синтаксический сахар попутного ветра

Сначала напишите простой пример:

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

@layer base {
  h1 {
    @apply text-2xl;
  }
}

@layer components {
  .btn {
    @apply bg-gray-500 text-white font-bold;
    @apply py-2 px-4 rounded;
    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
    background-color: theme("colors.blue-500");
  }
}

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
  }
  @responsive {
    .bg-opacity-none {
      @apply opacity-0;
    }
  }
}
  • @tailwind: Используйте директиву @Tailwind, чтобы вставить базу, компоненты, утилиты Tailwind в CSS.
  • @apply: Используйте @apply, чтобы встроить любой стиль в свой собственный CSS.
  • @layer: используйте директиву @layer, чтобы указать Tailwind набор «блоков», принадлежащих пользовательскому стилю. Доступно в базе, компонентах, утилитах.
  • @variants: вы можете генерировать реактивные, зависающие, фокусные, активные и другие псевдоклассы, заключая их определения в директивы @variant.
  • @responsive: вы можете сделать свой собственный класс адаптивным, поместив определение класса в директиву @responsive.
  • theme(): используйте функцию theme() и ., чтобы получить доступ к значениям конфигурации Tailwind.

Другие преимущества

Упаковка конфигурации по требованию

Полный пакет tailwindcss2.0 весит 3020,7 КБ, 1.8 — 2413,4 КБ, но если вы не используете стиль tailwindcss, сжимается ли он в ваших файлах?purgeвозможность встряхнуть дерево, чтобы уменьшить размер вашей окончательной сборки;

PurgeCSS будет искать классы в HTML. Он не пытается анализировать ваш HTML, искать атрибуты класса или динамически выполнять ваш JavaScript, он просто ищет во всем файле любую строку, которая соответствует этому регулярному выражению;

/[^<>"'`\s]\*[^<>"'`\s:]/g`

Не используйте такие стили, как btn-{type}, для определения стилей, чтобы избежать потери стиля.

Отсканированные файлы также можно настроить

// tailwind.config.js
module.exports = {
  purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
};

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

Если вы хотите настроить конфигурацию, вам нужно сначала понятьКонфигурация tailwindcss по умолчанию

существуетtailwind.config.jsВы можете расширить свои собственные элементы конфигурации в

Например, следующая конфигурация:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
    fontFamily: {
      display: ["Gilroy", "sans-serif"],
      body: ["Graphik", "sans-serif"],
    },
    borderWidth: {
      default: "1px",
      "0": "0",
      "2": "2px",
      "4": "4px",
    },
    extend: {
      colors: {
        cyan: "#9cdbff",
      },
      spacing: {
        "96": "24rem",
        "128": "32rem",
      },
    },
  },
};

пользовательский плагин

Я думаю, что это важная причина для меня ввести его в библиотеку компонентов, хотя у нас были похожие решения, но результат - выудить файл стиля компонента из библиотеки компонентов, поместить его в проект и использовать это в нем переменная стиля. наконец введен вmain.js中, такое ощущение, что реализация не особо красивая. Еще один момент заключается в том, что есть много цветовых переменных, которые очень трудно понять, и большинство из них не то, что пользователи хотят изменить.Во многих случаях нужно изменить только цвет темы.

Но на самом деле, независимо от того, какой файл js или css или vue.config.js помещен в, это не очень развязывающее решение.vue.config.jsПеременная цвета извлекается в,tailwind.config.jsсередина.

Поэтому я надеюсь, что общий стиль, который мы создаем, можно превратить в плагин, и я отправляю эту идею:vite-components-playgrount commit

Это не в традиционном смыслеcss-in-js,Кроме тогоcss-in-conifg. Ограничений по дизайну больше.

Недостатки Tailwindcss

Если вы знакомы с css, то вам нужно найти много API официальных веб-сайтов, чтобы соответствовать стилю tailwindcss по умолчанию в начале, например:

  • По умолчанию используется rem, тогда, если вы используете px, вам нужно учитывать проблему деления на 16.
  • opacity:0;вести перепискуopacity-0, opacity:1;вести перепискуopacity:100;
  • widthа такжеheightсоответствуетw, hпо вполне понятным причинам,line-heightсоответствуетleading-
  • font-size: 1.5rem;соответствуетtext-2xl, как бы 1,5 не делилось на 2
  • Вам также необходимо запомнить конфигурацию по умолчанию при написании плагина, в противном случае вам нужно найти его самостоятельно.
  • Я не могу найти некоторые стили, которые не очень популярны, напримерtranslateZ

Я изменилсяimpress, многие стили не могут быть изменены (хотя большая часть может быть изменена), и я также делал проекты с административными шаблонами, и я также чувствую, что если все пиксели исправлены, необходимо добавить большое количество пользовательских стилей.

vscode поставляется с множеством плагинов с функцией подсказки ввода.

Конечно, самое мучительное - это зайти на официальный сайт, чтобы найти апи для каждого стиля, и вам нужно столкнуться с проблемами, аналогичными проблемам Youda.Как оценить предложение Vue по синтаксическому сахару ref?;

окружающий

  • tailwindplay: Онлайн-редактор
  • tailblocks: Коннотация большого количества шаблонов
  • vue-tailwind: библиотека компонентов vue tailwind
  • nuxt: В последней версии официального сайта документации nuxt используется макет попутного ветра.

Многие официальные шаблоны платные

Другие шаблоны и библиотеки компонентов можно просмотретьawesome-tailwindcss

Изучите tailwindcss, чтобы увидеть мой переводtailwind-learning, который в основном является переводом официального сайта (сейчас это 1.x, и в будущем он будет изменен на 2.x). и мой собственный проект шаблонаelementui-tailwind-admin-template

отражение

На самом деле, с самого начала или даже сейчасjs -> ts,option Api -> compsition Api, документ повторно вводится чистымmarkdown-loader, На самом деле преобразование языка не более насильственно подключается первопроходцами, а доведенное до нас ограничение, которое сковывает самих пользователей с уровня кода. Соглашение, которое мы говорим, касается конфигурации, соглашение является скорее ограничением.

后会无期

Как самонадеянно, любовь сдержанна

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

На практике столкнулся с дилеммой:

  • HTML независим, CSS зависит от HTML,css-семантика:аналогичныйbtn btn-primary, но будет ранняя оптимизация, чем больше компонент сделан или чем конкретнее компонент, тем сложнее его повторно использовать.
  • CSS независим, HTML зависит от CSS, CSS можно легко использовать повторно, HTML не может легко настраивать стили: аналогичноtext2xl.

Выбор автора:Нейтральные к содержанию компоненты + служебные классы, а служебные классы имеют приоритет.

Основной код:

@tailwind components;
@tailwind utilities;

Уточните свои идеи

Если это компонент, стиль базового компонента, такой как цвет темы, базовое значение цвета, может быть введен в功能类, а стили компонентов можно добавлять в内容组件входить.

Если это проект, обычно нужно обращать внимание только на функциональный класс, извлекать цвет темы, базовое значение цвета и вводить его в功能类середина.

Здесь есть принцип, пока стиль не появится 3 раза, а затем рассмотрите возможность абстрагирования его в компонент или функциональный класс, а не извлечение стиля с самого начала, как это делают методологии, такие как БЭМ.

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

Tailwind css 2.0

Спустя 18 месяцев после версии 1.0 18 ноября 2020 года был выпущен tailwind css 2.0. Вот основные точки обновления:

  • Совершенно новая цветовая палитра с более чем 1x больше вариантов цвета, чем 1
  • Поддержка темного режима, речь идет не о скиннинге, а о поддержкеprefers-color-scheme
  • Отзывчивое увеличение2xl, минимальная поддерживаемая ширина1536px
  • Дружественный плагин стиля формыtailwindcss-forms
  • Для каждогоfont-sizeпредоставить соответствующиеline-heightsнастроить
  • Расширен диапазон стилей по умолчанию для некоторых функциональных классов, таких как интервал, размер текста, прозрачность и т. д.
  • @applyиспользуется во всех синтаксисе, например, с использованием чего-то вроде@apply hover:bg-blackсинтаксис
  • Можно настроить по умолчаниюtransitionВремя анимации или эффект

Стоит отметить, что tailwindcss 2.0 использует PostCss8, если старым пользователям нужно проверитьдокументация по обновлению

Я видел, что vite поддерживается, но vue-cli еще не присоединился к PostCss8, и ему нужно дождаться vue-cli5:Plan for Vue CLI v5

Дополнительный контент tailwindcss2 может относиться кtailwindcss-v2

Суммировать

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

Tailwind 2.0 был официально выпущен, приходите и используйте его.

Связанная литература

Категории