Заметки по Tailwind

Опубликовано: 17.03.2026

Установка

Процесс установки описан на официальной страницы фреймворка https://tailwindcss.com/docs/installation/tailwind-cli

После установки удобно прописать команду npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch в секцию "scripts" файла package.json. В таком случае её можно будет вызывать в облегченном синтаксисе.

"scripts": {
   "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch"
 },

Запуск npm run dev
 

Подключение иконок

  1. Устанавливаем плагин @iconify/tailwind4 . Плагин (@iconify/tailwind4) — это «движок». Он учит Tailwind понимать синтаксис icon-[...].
    npm install -D @iconify/tailwind4
  2. В input.css подключаем плагин
    @plugin "@iconify/tailwind4";
  3. Ищем понравившуюся иконку тут => https://icon-sets.iconify.design/ 
    К примеру я хочу отобразить иконку

    . Она входит в надор иконок cuida и называется cuida--notification-bell-outline.
  4. Устанавливаем этот набор с иконками
    npm install -D @iconify-json/cuida

  5. Отображаем так:
    <span class="icon-[cuida--notification-bell-outline]"></span> или в купе с другими стилями Tailwind
    <span class="icon-[cuida--notification-bell-outline] w-6 h-6 text-blue-500"></span>

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

     

Эффекты при наведении.
 

Справка:
hover: cтиль срабатывает только тогда, когда мышка находится прямо над этим элементом.
group-hover: cтиль срабатывает, когда мышка находится над любой частью родительского контейнера, помеченного классом group.
group-focus-within: этот модификатор говорит: «Кто-то внутри меня (например, инпут) получил фокус».

Пример 1: 
Внутри ссылки некий html с несколькими дивами. Требуется при наведении подсветить какой-то определенный див.

Решение: 
Родителю добавляется класс group или group с неким идентификатором, например group/my-link.
У цели добавляется класс group-hover:text-* или, для случая с идентификатором, group-hover/my-link:text-*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>

    <div class="w-75 p-5 grid grid-cols-[36px_1fr] gap-3 rounded-lg border border-blue-300 shadow-sm shadow-blue-900">
        <a href="#" class="contents group" onclick="return false;">
            <div>
                <div class="flex justify-center items-center p-3 bg-green-400 rounded-lg">
                    <svg w-9 h-9 xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M.5.5a7.9 7.9 0 0 0 6.5 3a7.9 7.9 0 0 0 6.5-3m-13 13a7.9 7.9 0 0 1 6.5-3a7.9 7.9 0 0 1 6.5 3m-9-10.34v7.68m5-7.68v7.68" stroke-width="1" />
</svg>
                </div>
            </div>
            <div class="line-clamp-2">
                <div class="flex items-center gap-1">
                    <div class="group-hover:text-blue-600">Близнецы</div>
                    <div>
                        <svg class="text-simple h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.293 7.793a1 1 0 0 1 1.414 0L12 14.086l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 15.5a2 2 0 0 1-2.828 0L4.293 9.207a1 1 0 0 1 0-1.414" clip-rule="evenodd" stroke-width="0.5" stroke="currentColor"/></svg>
                    </div>
                </div>
                <div class="text-gray-400 text-[13px]">Начинайте день с дел, с которыми можете справиться самостоятельно.</div>
            </div>
        </a>
    </div>
</body>

 

Пример 2:
Есть ссылка в области которой размещена вторая ссылка. Например имеется иконка-ссылка, абсолютоно позиционированная в области первой ссылки.
Требуемый эффект: при наведении на главную ссылку — подсвечивается вся область, при наведении на вторичную ссылку — подсвечивается только ее область.

Это классическая проблема «всплытия» (bubbling) события hover. Когда происходит наведение над вторичной ссылкой, курсор также оказывается и над основной ссылкой!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
    <div class="w-75 p-5 flex items-center gap-5 rounded-lg hover:bg-gray-400/10 has-[.peer-link:hover]:bg-transparent! relative border border-blue-300 shadow-sm shadow-blue-900">
        <a href="#" class="contents" onclick="return false;">
            <div class="shrink-0">
                <svg class="w-12 h-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path fill="currentColor" d="M8.1 21.213q-1.825-.788-3.175-2.138T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22t-3.9-.788m3.875-8.737Q13 11.45 13 10t-1.025-2.475T9.5 6.5T7.025 7.525T6 10t1.025 2.475T9.5 13.5t2.475-1.025m6.3 1.3Q19 13.05 19 12t-.725-1.775T16.5 9.5t-1.775.725T14 12t.725 1.775t1.775.725t1.775-.725M12 20q2.125 0 3.875-1t2.825-2.65q-.525-.15-1.075-.25T16.5 16q-1.325 0-3.2.775t-3 3.05q.425.1.85.138T12 20m-3.175-.65q.875-1.8 1.988-2.675T12.5 15.5q-.725-.225-1.463-.362T9.5 15q-1.125 0-2.225.275t-2.125.775q.65 1.075 1.588 1.938t2.087 1.362" stroke-width="0.3" stroke="currentColor" />
                </svg>
            </div>
            <div class="grow">
                <div>User name</div>
                <div class="text-gray-400 text-[13px]">user@mail.example</div>
            </div>
        </a>
        <a href="#" class="peer-link absolute right-2 hover:bg-gray-400/10 p-1.5 rounded-lg z-10" onclick="return false;">
            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.293 7.793a1 1 0 0 1 1.414 0L12 14.086l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 15.5a2 2 0 0 1-2.828 0L4.293 9.207a1 1 0 0 1 0-1.414" clip-rule="evenodd" stroke-width="0.5" stroke="currentColor"/></svg>
        </a>
    </div>
</body>

В данном примере цели добавляется произвольный класс ( в данном случае это .peer-link).
У родителя проверяется находится ли курсор над вторичной ссылкой и, если да, то фон обесцвечивается ( has-[.peer-link:hover]:bg-transparent! )
 

Пример 3:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
    <div class="grid grid-cols-[300px_1fr] gap-5">

        <aside>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, nobis. Sequi repudiandae nisi aliquam eligendi est eaque reiciendis, minus doloribus ea optio officia sapiente exercitationem! Vel ad nulla in saepe.
            Quidem a voluptatibus possimus quaerat rem iusto sunt, et eaque, sequi maxime earum id minima libero temporibus suscipit voluptatum vitae unde adipisci velit repellendus! Similique optio unde voluptatum non amet?
        </aside>

        <main>
            <form action="" class="relative group/search">
                <div class="fixed
                            inset-0
                            bg-gray-300
                            opacity-0
                            transition-opacity
                            z-40
                            pointer-events-none
                            group-focus-within/search:opacity-30
                            group-focus-within/search:pointer-events-auto
                    "></div>

                <div class="relative z-50 flex rounded-xl bg-blue-500">
                    <input class="grow focus:outline-none px-2 border-2 border-blue-500 rounded-xl rounded-r-lg bg-white" type="text" placeholder="Поиск">
                    <div class="relative">
                        <button class="shrink-0 px-4 py-2 text-base font-medium text-white cursor-pointer">Найти</button>
                        <div class="absolute top-0 -left-10 h-full flex items-center cursor-pointer">
<svg class="w-6 h-6 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
	<path fill="currentColor" d="M12 16.73q1.567 0 2.649-1.081T15.731 13t-1.082-2.649T12 9.269t-2.649 1.082T8.269 13t1.082 2.649T12 16.731m0-1q-1.165 0-1.948-.783T9.269 13t.783-1.948T12 10.269t1.948.783t.783 1.948t-.783 1.948t-1.948.783M4.616 20q-.691 0-1.153-.462T3 18.384V7.616q0-.691.463-1.153T4.615 6h2.958l1.366-1.485q.217-.242.527-.379Q9.777 4 10.125 4h3.75q.348 0 .659.137q.31.136.527.379L16.428 6h2.958q.69 0 1.153.463T21 7.616v10.769q0 .69-.462 1.153T19.385 20zm0-1h14.769q.269 0 .442-.173t.173-.442V7.615q0-.269-.173-.442T19.385 7h-3.397l-1.844-2H9.856L8.012 7H4.615q-.269 0-.442.173T4 7.616v10.769q0 .269.173.442t.443.173M12 13" stroke-width="0.3" stroke="currentColor" />
</svg>
                        </div>
                    </div>
                </div>
            </form>
            <div class="mt-5">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto velit tempora esse maxime, itaque sed repellendus magni? Iste, veniam fuga. Totam sint possimus numquam exercitationem rem sed hic quod similique?
                Deserunt sunt culpa harum nostrum omnis assumenda modi unde sit blanditiis? Nisi, nam? Quisquam soluta tenetur et, sit quos dolores explicabo consequuntur ipsum, perspiciatis fugit vitae eos nulla nobis vel?
                Reiciendis officiis neque officia quasi voluptas molestiae est blanditiis unde dicta natus maiores qui quo tenetur quaerat numquam fugiat laborum, error accusantium! Porro, sed distinctio! Minus rem deserunt error eos.
            </div>
        </main>

    </div>
</body>
</html>

Родителю задается класс group/search (можно просто group).
Среди его дочерних элементов располагается фиксированный див со следующими свойствами:

  • растянут на весь экран ( fixed + inset-0 )
  • прозрачность 0% ( opacity-0 ) 
  • откючены отклики на различные события мыши ( pointer-events-none ), чтобы не мешать всем остальным элементам страницы
  • выставлен значительный z-index для перекрытия остальных слоев на странице
  • добавлено правило group-focus-within/search - управляющее изменением значений, когда любой дочерний элемент родителя получит фокус.

Элементу формы, который мы не хоти скрывать выставляется большее значение z-index, нежели скрытому диву.

Tags