Быстро создавайте современные веб-сайты, не выходя из HTML-кода.

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

Начать
<figure class="bg-slate-100 rounded-xl dark:bg-slate-800">
  <img class="w-24 h-24" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 space-y-4">
    <blockquote>
      <p class="text-lg">
        Tailwind CSS - единственный фреймворк,
        который я видел масштабируемым в больших командах.
        Его легко настроить, адаптировать к любому дизайну,
        а размер сборки крошечный.”
      </p>
    </blockquote>
    <figcaption>
      <div>
        Сара Даян
      </div>
      <div>
        Штатный инженер, Алголия
      </div>
    </figcaption>
  </div>
</figure>
“Tailwind CSS - единственный фреймворк, который я видела масштабируемым в больших командах. Его легко настроить, адаптировать к любому дизайну, а размер сборки крошечный.”

Сара Даян

Штатный инженер, Алголия

«Лучшие практики» на самом деле не работают.

Я написал несколько тысяч слов о том, почему традиционные «семантические имена классов» являются причиной того, почему CSS трудно поддерживать, но правда в том, что вы никогда не поверите мне, пока не попробуете это на самом деле. Если вы сможете подавить желание позываться на достаточно долгое время, чтобы дать ему шанс, я действительно думаю, вы удивитесь, как вы когда-либо работали с CSS каким-либо другим способом.

Адам Уотан
Создатель Tailwind CSS

Testimonials

  • Я чувствую себя идиотом из-за того, что до сих пор не использовал Tailwind CSS.

    Remix & React Training
  • Если бы мне пришлось порекомендовать способ начать программирование сегодня, это был бы HTML + CSS с Tailwind CSS.

  • У меня нет навыков дизайна, а с Tailwind я могу с легкостью создавать красивые веб-сайты, и это все, что я когда-либо хотел, в рамках CSS.

    Sara Vieira
    CodeSandbox
  • Tailwind CSS - лучший CSS-фреймворк на планете.

    Former WWE Champion
  • Я начал использовать @tailwindcss. Я сразу влюбился в их адаптивные модификаторы, подробную документацию и то, как легко настраивать цветовые палитры.

    Software Engineer
  • Мне он понравился в тот момент, когда я его использовал.

  • В @tailwindcss есть одна вещь, которая отстой - после того, как вы использовали его в нескольких проектах, писать нормальный CSS снова становится настоящей головной болью.

    JavaScript Developer
  • Хорошо, я официально *все* участвую в ажиотажном поезде @tailwindcss. Никогда не думал, что создание веб-сайтов может быть настолько смехотворно быстрым и гибким.

    Programmer @ TrendyMinds
  • Хорошо, @tailwindcss только что нажал на меня, и теперь я чувствую себя #!@%&$% идиотом.

    React Engineer
  • Я использую @tailwindcss последние несколько месяцев, и это потрясающе. Раньше я уже использовал некоторые служебные классы, но сначала я буду использовать служебные классы... вот и все.

    Designer
  • После того, как я наконец смог использовать @tailwindcss в реальном клиентском проекте за последние две недели, я больше никогда не хочу писать CSS вручную. Я был скептиком, но шумиха реальна.

    Ruby & iOS Developer
  • Я не думал, что мне понравится @tailwindcss... потратил день, используя его для POC, в восторге! Хотелось бы, чтобы это было, когда мы начали работу над дизайн-системой нашей компании, серьезно рассматривая полную перестройку

    Front-End Developer
  • @tailwindcss сначала выглядела неприятно, но теперь я подсел на нее.

    Front-End Developer
  • Как только вы начнете использовать Tailwind, пути назад не будет.

  • Я использую @tailwindcss для каждого отдельного проекта, потому что он устраняет большинство неудобств CSS и работает в несколько раз быстрее

  • Это изменило траекторию моего бизнеса. Я могу разрабатывать более привлекательные, более производительные и доступные компоненты в 1/3 случаев.

  • Мой первый Tailwind сработал отлично, но по-настоящему круто было вернуться к нему через несколько месяцев и сэкономить столько времени на внесении новых изменений. Я знал, как все сочетается мгновенно.

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

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

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

  • Помню, я был в ужасе, когда впервые увидел утилиту first css. Но за последние месяцы использование Tailwind во все большем количестве проектов было просто новым радостным способом создания вещей в Интернете.

  • Сначала я был настроен скептически, когда начал использовать @tailwindcss, до тех пор, пока мне не потребовалось скопировать компонент @sveltejs в другое место, и мне не нужно было беспокоиться о том, что какой-либо из моих стилей сломается.

  • @tailwindcss делает вас лучше в CSS. Изменило мои мысли.

  • Потрясающий материал! Я не дизайнер и не фронтенд-разработчик; пока я не нашел Tailwind в прошлом году, я не занимался CSS с начала девяностых. Tailwind и Tailwind UI означают, что теперь я могу быстро создавать красивые интерфейсы, что дает мне огромные возможности. Безумно впечатляющий проект.

  • Признаюсь, до прошлого года я был большим скептиком по отношению к @tailwindcss. Я подумал: «Зачем мне вводить миллион классов, которые просто абстрагируют отдельные свойства CSS?» К настоящему времени я чувствую, что стал вдвое продуктивнее при создании пользовательского интерфейса. Это действительно потрясающе.

  • Я близок к завершению своего многомесячного проекта по переписыванию интерфейса моей компании на TypeScript и @tailwindcss. Тем не менее, каждый раз, когда я повторно реализую компонент, я думаю: «Вау, на этот раз все было намного проще». Tailwind скалы.

    Co-Founder/CTO @LaunchPathInc
  • С учетом того объема поставок, который нам необходимо сделать, пропуска преобразования мозговых волн в CSS и возможности реализовать со скоростью мысли с помощью Tailwind, моя жизнь в качестве разработчика fullstack никогда не была более счастливой.

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

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

    Full-Stack Developer

На основе ограничений

API для вашей дизайн-системы.

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

Подробнее, основы утилит
  • w-64
  • w-60
  • w-56
  • w-52
  • w-48
  • w-44
  • w-40
  • w-36
<div class="space-y-4">
<div class="w-96 bg-white shadow rounded">
w-96
</div>
<div class="w-80 bg-white shadow rounded">
w-80
</div>
<div class="w-72 bg-white shadow rounded">
w-72
</div>
<div class="w-64 bg-white shadow rounded">
w-64
</div>
<div class="w-60 bg-white shadow rounded">
w-60
</div>
<div class="w-56 bg-white shadow rounded">
w-56
</div>
<div class="w-52 bg-white shadow rounded">
w-52
</div>
<div class="w-48 bg-white shadow rounded">
w-48
</div>
</div>

Строить что угодно

Создавайте все, что хотите, серьезно.

Поскольку Tailwind слишком низкоуровневый, он никогда не побуждает вас создавать один и тот же сайт дважды. Даже с той же цветовой палитрой и шкалой размеров легко создать тот же компонент с совершенно другим внешним видом в следующем проекте.

Начало работы, установка
<div class="flex font-sans">
  <div class="flex-none w-48 relative">
    <img src="/classic-utility-jacket.jpg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
  </div>
  <form class="flex-auto p-6">
    <div class="flex flex-wrap">
      <h1 class="flex-auto text-lg font-semibold text-slate-900">
        Классическая куртка в стиле милитари
      </h1>
      <div class="text-lg font-semibold text-slate-500">
        $110.00
      </div>
      <div class="w-full flex-none text-sm font-medium text-slate-700 mt-2">
        In stock
      </div>
    </div>
    <div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-slate-200">
      <div class="space-x-2 flex text-sm">
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xs" checked />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            XS
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="s" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            S
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="m" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            M
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="l" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            L
          </div>
        </label>
        <label>
          <input class="sr-only peer" name="size" type="radio" value="xl" />
          <div class="w-9 h-9 rounded-lg flex items-center justify-center text-slate-700 peer-checked:font-semibold peer-checked:bg-slate-900 peer-checked:text-white">
            XL
          </div>
        </label>
      </div>
    </div>
    <div class="flex space-x-4 mb-6 text-sm font-medium">
      <div class="flex-auto flex space-x-4">
        <button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
          Buy now
        </button>
        <button class="h-10 px-6 font-semibold rounded-md border border-slate-200 text-slate-900" type="button">
          Add to bag
        </button>
      </div>
      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200" type="button" aria-label="Like">
        <svg width="20" height="20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
    </div>
    <p class="text-sm text-slate-700">
      Free shipping on all continental US orders.
    </p>
  </form>
</div>

Производительность

Он крошечный - никогда больше не отправляйте неиспользуемый CSS.

Tailwind автоматически удаляет весь неиспользуемый CSS при сборке для производства, что означает, что ваш окончательный набор CSS является наименьшим из возможных. Фактически, большинство проектов Tailwind отправляют клиенту менее 10 КБ CSS.

Подробнее, об оптимизации для производственной среды
index.html
tailwind.config.js
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Документ</title>
<link rel="stylesheet" href="/build.css">
</head>
<body>
<button class=""></button>
</body>
</html>
build.css
Terminal
npx tailwindcss -o build.css --content index.html -w

Сначала мобильные

Все адаптивно.

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

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

Подробнее, об адаптивном дизайне
workcation.com
Tailwind UI - Official Tailwind CSS Components
Workcation - Find a trip that suits you
Headless UI – Unstyled, fully accessible UI components
<main class="py-6 px-4 sm:p-6 md:py-10 md:px-8">
<div class="max-w-4xl mx-auto grid grid-cols-1 lg:max-w-5xl lg:gap-x-20 lg:grid-cols-2">
<div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1">
<h1 class="mt-1 text-lg font-semibold text-white sm:text-slate-900 md:text-2xl dark:sm:text-white">Дом на пляже в Коллингвуде</h1>
<p class="text-sm leading-4 font-medium text-white sm:text-slate-500 dark:sm:text-slate-400">Весь дом</p>
</div>
<div class="grid gap-4 col-start-1 col-end-3 row-start-1 sm:mb-6 sm:grid-cols-4 lg:gap-6 lg:col-start-2 lg:row-end-6 lg:row-span-6 lg:mb-0">
<img src="/beach-house.jpg" alt="" class="w-full h-60 object-cover rounded-lg sm:h-52 sm:col-span-2 lg:col-span-full" loading="lazy">
<img src="/beach-house-interior-1.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg sm:block sm:col-span-2 md:col-span-1 lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
<img src="/beach-house-interior-2.jpg" alt="" class="hidden w-full h-52 object-cover rounded-lg md:block lg:row-start-2 lg:col-span-2 lg:h-32" loading="lazy">
</div>
<dl class="mt-4 text-xs font-medium flex items-center row-start-2 sm:mt-1 sm:row-start-3 md:mt-2.5 lg:row-start-2">
<dt class="sr-only">Отзывы</dt>
<dd class="text-indigo-600 flex items-center dark:text-indigo-400">
<svg width="24" height="24" fill="none" aria-hidden="true" class="mr-1 stroke-current dark:stroke-indigo-500">
<path d="m12 5 2 5h5l-4 4 2.103 5L12 16l-5.103 3L9 14l-4-4h5l2-5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>4.89 <span class="text-slate-400 font-normal">(128)</span></span>
</dd>
<dt class="sr-only">Место расположения</dt>
<dd class="flex items-center">
<svg width="2" height="2" aria-hidden="true" fill="currentColor" class="mx-3 text-slate-300">
<circle cx="1" cy="1" r="1" />
</svg>
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-1 text-slate-400 dark:text-slate-500" aria-hidden="true">
<path d="M18 11.034C18 14.897 12 19 12 19s-6-4.103-6-7.966C6 7.655 8.819 5 12 5s6 2.655 6 6.034Z" />
<path d="M14 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
</svg>
Коллингвуд, Онтарио
</dd>
</dl>
<div class="mt-4 col-start-1 row-start-3 self-center sm:mt-0 sm:col-start-2 sm:row-start-2 sm:row-span-2 lg:mt-6 lg:col-start-1 lg:row-start-3 lg:row-end-4">
<button type="button" class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg">Проверить наличие свободных мест</button>
</div>
<p class="mt-4 text-sm leading-6 col-start-1 sm:col-span-2 lg:mt-6 lg:row-start-4 lg:col-span-1 dark:text-slate-400">
Этот солнечный и просторный номер предназначен для тех, кто путешествует налегке и ищет удобное и уютное место, чтобы прилечь на ночь или две. Этот пляжный дом расположен в оживленном районе со множеством кафе, пабов, ресторанов и супермаркетов, недалеко от всех основных достопримечательностей, таких как Эдинбургский замок и Артурс-Сит.
</p>
</div>
</main>

Варианты состояний

Состояния наведения и фокуса? Мы их получили.

Хотите стилизовать что-нибудь при наведении курсора? Поместите hover: в начало класса, который вы хотите добавить. Работает для focus, active, disabled, focus-within, focus-visible, и даже причудливые состояния, которые мы придумали сами, такие как group-hover.

Подробнее, об управлении наведением, фокусом и другими состояниями

Проекты

Новый
  • Title
    Интеграция API
    Category
    Инженеры
    Users
  • Title
    Новый план льгот
    Category
    Отдел кадров
    Users
  • Новый проект
<section>
<header class="bg-white space-y-4 p-4 sm:px-8 sm:py-6 lg:p-4 xl:px-8 xl:py-6">
<div class="flex items-center justify-between">
<h2 class="font-semibold text-slate-900">Проекты</h2>
<a href="/new" class="hover:bg-blue-400 group flex items-center rounded-md bg-blue-500 text-white text-sm font-medium pl-2 pr-3 py-2 shadow-sm">
<svg width="20" height="20" fill="currentColor" class="mr-2" aria-hidden="true">
<path d="M10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 1-1Z" />
</svg>
New
</a>
</div>
<form class="group relative">
<svg width="20" height="20" fill="currentColor" class="absolute left-3 top-1/2 -mt-2.5 text-slate-400 pointer-events-none group-focus-within:text-blue-500" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" />
</svg>
<input class="focus:ring-2 focus:ring-blue-500 focus:outline-none appearance-none w-full text-sm leading-6 text-slate-900 placeholder-slate-400 rounded-md py-2 pl-10 ring-1 ring-slate-200 shadow-sm" type="text" aria-label="Filter projects" placeholder="Filter projects...">
</form>
</header>
<ul class="bg-slate-50 p-4 sm:px-8 sm:pt-6 sm:pb-8 lg:p-4 xl:px-8 xl:pt-6 xl:pb-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4 text-sm leading-6">
<li x-for="project in projects">
<a :href="project.url" class="hover:bg-blue-500 hover:ring-blue-500 hover:shadow-md group rounded-md p-3 bg-white ring-1 ring-slate-200 shadow-sm">
<dl class="grid sm:block lg:grid xl:block grid-cols-2 grid-rows-2 items-center">
<div>
<dt class="sr-only">Заголовок</dt>
<dd class="group-hover:text-white font-semibold text-slate-900">
{project.title}
</dd>
</div>
<div>
<dt class="sr-only">Категория</dt>
<dd class="group-hover:text-blue-200">{project.category}</dd>
</div>
<div class="col-start-2 row-start-1 row-end-3 sm:mt-4 lg:mt-0 xl:mt-4">
<dt class="sr-only">Пользователи</dt>
<dd x-for="user in project.users" class="flex justify-end sm:justify-start lg:justify-end xl:justify-start -space-x-1.5">
<img :src="user.avatar" :alt="user.name" class="w-6 h-6 rounded-full bg-slate-100 ring-2 ring-white" loading="lazy">
</dd>
</div>
</dl>
</a>
</li>
<li class="flex">
<a href="/new" class="hover:border-blue-500 hover:border-solid hover:bg-white hover:text-blue-500 group w-full flex flex-col items-center justify-center rounded-md border-2 border-dashed border-slate-300 text-sm leading-6 text-slate-900 font-medium py-3">
<svg class="group-hover:text-blue-500 mb-1 text-slate-400" width="20" height="20" fill="currentColor" aria-hidden="true">
<path d="M10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 1-1Z" />
</svg>
Новый проект
</a>
</li>
</ul>
</section>

Компонентно-управляемый

Беспокоитесь о дублировании? Не будет.

Если вы повторяете одни и те же утилиты снова и снова, все, что вам нужно сделать, это извлечь их в компонент или часть шаблона и бум - у вас есть единственный источник правды, так что вы можете вносить изменения в одном месте.

Подробнее, о повторном использовании стилей

Прогноз отрицательный

Rating
PG-13
Year
2021
Genre
Комедия
Runtime
1ч 46м
Cast
Саймон Пегг, Зак Галифианакис

Рошель, Рошель

Rating
R
Year
2020
Genre
Романтика
Runtime
1ч 56м
Cast
Эмилия Кларк
import Nav from ''
import NavItem from ''
import List from ''
import ListItem from ''

export default function Movies({ movies }) {
  return (
    <div className="divide-y divide-slate-100">
      <Nav>
        <NavItem href="/new" isActive>New Releases</NavItem>
        <NavItem href="/top">Top Rated</NavItem>
        <NavItem href="/picks">Vincent’s Picks</NavItem>
      </Nav>
      <List>
        {movies.map((movie) => (
          <ListItem key={movie.id} movie={movie} />
        ))}
      </List>
    </div>
  )
}

Не любите компонентные фреймворки?

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

Подробнее, о повторном использовании стилей

Еженедельно один на один

Дата и время
-
Место расположения
Китченер, ВКЛ
Описание
Нет описания встречи
Участники
Эндрю Макдональд
Отклонить
Принять

styles.css

.btn {
  @apply text-base font-medium rounded-lg p-3;
}

.btn--primary {
  @apply bg-sky-500 text-white;
}

.btn--secondary {
  @apply bg-slate-100 text-slate-900;
}

index.html

</dd>
</div>
</dl>
<footer class="grid grid-cols-2 gap-x-6">
<button class="btn btn--secondary">Decline</button>
<button class="btn btn--primary">Accept</button>
</footer>
</article>

Темный режим

Теперь с темным режимом.

Не хотите быть одним из тех веб-сайтов, которые ослепляют людей, когда они открывают его на своем телефоне в 2 часа ночи? Включите темный режим в файле конфигурации, затем добавьте dark: перед любой цветовой утилитой, чтобы применить его, когда темный режим активен. Работает с цветами фона, цветами текста, цветами границ и даже градиентами.

Подробнее, темный режим

Ep. 128

Scaling CSS at Heroku with Utility Classes

Full Stack Radio

24:16
75:50
<div class="bg-white border-slate-100 dark:bg-slate-800 dark:border-slate-500 border-b rounded-t-xl p-4 pb-6 sm:p-10 sm:pb-8 lg:p-6 xl:p-10 xl:pb-8 space-y-6 sm:space-y-8 lg:space-y-6 xl:space-y-8">
  <div class="flex items-center space-x-4">
    <img src="/full-stack-radio.png" alt="" width="88" height="88" class="flex-none rounded-lg bg-slate-100" loading="lazy" />
    <div class="min-w-0 flex-auto space-y-1 font-semibold">
      <p class="text-cyan-500 dark:text-cyan-400 text-sm leading-6">
        <abbr title="Episode">Ep.</abbr> 128
      </p>
      <h2 class="text-slate-500 dark:text-slate-400 text-sm leading-6 truncate">
        Scaling CSS at Heroku with Utility Classes
      </h2>
      <p class="text-slate-900 dark:text-slate-50 text-lg">
        Full Stack Radio
      </p>
    </div>
  </div>
  <div class="space-y-2">
    <div class="relative">
      <div class="bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
        <div class="bg-cyan-500 dark:bg-cyan-400 w-1/2 h-2" role="progressbar" aria-label="music progress" aria-valuenow="1456" aria-valuemin="0" aria-valuemax="4550"></div>
      </div>
      <div class="ring-cyan-500 dark:ring-cyan-400 ring-2 absolute left-1/2 top-1/2 w-4 h-4 -mt-2 -ml-2 flex items-center justify-center bg-white rounded-full shadow">
        <div class="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full ring-1 ring-inset ring-slate-900/5"></div>
      </div>
    </div>
    <div class="flex justify-between text-sm leading-6 font-medium tabular-nums">
      <div class="text-cyan-500 dark:text-slate-100">24:16</div>
      <div class="text-slate-500 dark:text-slate-400">75:50</div>
    </div>
  </div>
</div>
<div class="bg-slate-50 text-slate-500 dark:bg-slate-600 dark:text-slate-200 rounded-b-xl flex items-center">
  <div class="flex-auto flex items-center justify-evenly">
    <button type="button" aria-label="Add to favorites">
      <svg width="24" height="24">
        <path d="M7 6.931C7 5.865 7.853 5 8.905 5h6.19C16.147 5 17 5.865 17 6.931V19l-5-4-5 4V6.931Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </button>
    <button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Previous">
      <svg width="24" height="24" fill="none">
        <path d="m10 12 8-6v12l-8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M6 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </button>
    <button type="button" aria-label="Rewind 10 seconds">
      <svg width="24" height="24" fill="none">
        <path d="M6.492 16.95c2.861 2.733 7.5 2.733 10.362 0 2.861-2.734 2.861-7.166 0-9.9-2.862-2.733-7.501-2.733-10.362 0A7.096 7.096 0 0 0 5.5 8.226" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M5 5v3.111c0 .491.398.889.889.889H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </button>
  </div>
  <button type="button" class="bg-white text-slate-900 dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-20 h-20 rounded-full ring-1 ring-slate-900/5 shadow-md flex items-center justify-center" aria-label="Pause">
    <svg width="30" height="32" fill="currentColor">
      <rect x="6" y="4" width="4" height="24" rx="2" />
      <rect x="20" y="4" width="4" height="24" rx="2" />
    </svg>
  </button>
  <div class="flex-auto flex items-center justify-evenly">
    <button type="button" aria-label="Skip 10 seconds">
      <svg width="24" height="24" fill="none">
        <path d="M17.509 16.95c-2.862 2.733-7.501 2.733-10.363 0-2.861-2.734-2.861-7.166 0-9.9 2.862-2.733 7.501-2.733 10.363 0 .38.365.711.759.991 1.176" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M19 5v3.111c0 .491-.398.889-.889.889H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </button>
    <button type="button" class="hidden sm:block lg:hidden xl:block" aria-label="Next">
      <svg width="24" height="24" fill="none">
        <path d="M14 12 6 6v12l8-6Z" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M18 6v12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </button>
    <button type="button" class="rounded-lg text-xs leading-6 font-semibold px-2 ring-2 ring-inset ring-slate-500 text-slate-500 dark:text-slate-100 dark:ring-0 dark:bg-slate-500">
      1x
    </button>
  </div>
</div>

Кастомизация

Расширьте его, настройте, измените.

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

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

Подробнее, конфигурация

Типография

  • CSS класс
    font-display
    Название шрифта
    Inter
    Образец
    AaBbCc
  • CSS класс
    font-body
    Размер шрифта
    14pt
    Образец
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.

Colors

  • Префикс CSS-класса
    bg-primary
    Диапазон
    50-900
    Образец
module.exports = {
  theme: {
    fontFamily: {
      display: ['Inter', 'system-ui', 'sans-serif'],
      body: ['Inter', 'system-ui', 'sans-serif'],
    },
    colors: {
      primary: {
        50: '#eff6ff',
        100: '#dbeafe',
        200: '#bfdbfe',
        300: '#93c5fd',
        400: '#60a5fa',
        500: '#3b82f6',
        600: '#2563eb',
        700: '#1d4ed8',
        800: '#1e40af',
        900: '#1e3a8a',
      },
      secondary: {
        50: '#f8fafc',
        100: '#f1f5f9',
        200: '#e2e8f0',
        300: '#cbd5e1',
        400: '#94a3b8',
        500: '#64748b',
        600: '#475569',
        700: '#334155',
        800: '#1e293b',
        900: '#0f172a',
      },
    },
  },
}

Современные функции

Новинка - наша зона комфорта.

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

У нас есть первоклассная поддержка сетки CSS, составные преобразования и градиенты на основе переменных CSS, поддержка современных селекторов состояния, таких как :focus-visible, и многое другое.

Подробнее, о столбцах шаблона сетки
<div class="grid grid-flow-col grid-rows-2 grid-cols-3 gap-8">
  <div>
    <img src="/mountains-1.jpg" alt="" loading="lazy">
  </div>
  <div class="col-start-3">
    <img src="/mountains-2.jpg" alt="" loading="lazy">
  </div>
  <div>
    <img src="/mountains-3.jpg" alt="" loading="lazy">
  </div>
  <div>
    <img src="/mountains-4.jpg" alt="" loading="lazy">
  </div>
  <div class="row-start-1 col-start-2 col-span-2">
    <img src="/mountains-5.jpg" alt="" loading="lazy">
  </div>
</div>

Инструменты редактора

Интеграция IDE мирового класса.

Беспокоитесь о том, чтобы запомнить все эти имена классов? Расширение Tailwind CSS IntelliSense для VS Code поможет Вам.

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

Подробнее, настройка редактора
<div class="w-full flex items-center justify-between block p-6 space-x-6">
  <div class="flex-1 truncate">
    <div class="flex items-center space-x-3">
      <h3 class="text-slate-900 text-sm font-medium truncate">Джейн Купер</h3>
      <span class="">Админ</span>
    </div>
    <p class="mt-1 text-slate-500 text-sm truncate">Региональный техник парадигмы</p>
  </div>
  <img class="w-10 h-10 bg-slate-300 rounded-full shrink-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="" loading="lazy">
</div>
<div class="border-t border-slate-200">
  <div class="-mt-px flex">
    <div class="w-0 flex-1 flex border-r border-slate-200">
      <a href="#" class="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-slate-700 font-medium border border-transparent rounded-bl-lg hover:text-slate-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150">
        <svg class="w-5 h-5 text-slate-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
        </svg>
        <span class="ml-3">Эл. почта</span>
      </a>
    </div>
  </div>
</div>

Problems

  • 'flex' applies the same CSS property as 'block'.

  • 'block' applies the same CSS property as 'flex'.

Готовые компоненты

Двигайтесь еще быстрее с Tailwind UI.

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

Подробнее