Рабочий дневник: День 142Обновление Tailwind CSS🔥 22 января вышла 4 версия Tailwind CSS, которая наконец-то позволяет настраивать фреймворк прямо в CSS, а не в JavaScript файлах.
Кроме того, теперь все дизайн-токены доступны через CSS-переменные, как это принято у нормальных людей.
💊 Лучшее в этом обновлении — миграция с версии 3 на 4 занимает всего 5 минут. Самое сложное — просто запустить команду:
npx @tailwindcss/upgrade@next
Эта команда автоматически выполнит следующие действия:
1. Переименование утилит:<!-- Было → Стало -->
outline-none → outline-hidden
shadow-sm → shadow-xs
rounded-sm → rounded-xs
ring → ring-3
2. Обновление директив:/* Старый вид */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Новый вид */
@import "tailwindcss";
3. Обновление конфигурации:
• Перенос настроек из JavaScript в CSS
• Обновление переменных темы
4. Изменение значений по умолчанию:
• Цвет границ (border-color) теперь currentColor вместо gray-200
• Толщина кольца (ring) теперь 1px вместо 3px
• Цвет плейсхолдера теперь соответствует текущему цвету с 50% прозрачностью
5. Обновление синтаксиса переменных:<!-- Старый синтаксис -->
<div class="bg-[--brand-color]">
<!-- Новый синтаксис -->
<div class="bg-(--brand-color)">
6. Изменение порядка вариантов:<!-- Старый порядок (справа налево) -->
<div class="first:*:pt-0">
<!-- Новый порядок (слева направо) -->
<div class="*:first:pt-0">
7. Удаление устаревших утилит:css
• bg-opacity-*
• text-opacity-*
• border-opacity-*
и другие
☠️ Честно говоря, рад, что не пришлось делать это вручную. Проект теперь не только быстрее билдится, но и работает заметно шустрее.
Хотел замерить метрики, но и без этого хватает дел. Главное — всё работает!
🥃 Осталось только перенести daisyUI на 5 бета-версию (релиз в марте), которая уже работает на Tailwind v4.
Кстати, заметил, что Vite тоже внезапно обновился с версии 5 до 6. Думаю, проблем с этим не возникнет.
📊 #статистика
День 1163 == 2519 час в IT