За последние несколько лет Tailwind CSS изменил правила игры для многих разработчиков, предложив подход, ориентированный на утилиты, который помогает быстро преобразовать дизайн в код. Дело не в том, что Tailwind сам по себе является антипаттерном; напротив, это очень полезный инструмент. Это позволяет разработчикам работать быстрее и создавать элементы с большей степенью детализации. Более того, это помогает сократить разрыв между структурой и стилем, облегчая просмотр дизайна непосредственно в разметке.

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

https://spin.atomicobject.com/tailwind-css-anti-patterns

Создайте поле ввода, используя 🚀
код HTML и CSS

https://github.com/atherosai/ui/tree/main/input-04

Карточки с параллаксом и размытием по маске. 😷

Настраивайте CSS, пока не получите то, что вас устраивает.🤙
https://codepen.io/likai/pen/oNOPOZG

Самый важный код CSS, который вы должны знать: все в одном.

CSS Slinky в 3D? Вызов принят!

https://css-tricks.com/a-css-slinky-in-3d/

Создание индикатора ограничения количества символов в текстовой области

https://dev.to/sarahokolo/creating-a-textarea-character-limit-indicator-5fol

Изучите CSS Grid — 13-минутное глубокое погружение

https://www.youtube.com/watch?v=EiNiSFIPIQE

Создайте боковую панель, используя только код HTML и CSS

https://github.com/atherosai/ui/tree/main/sidebar-07

Адаптивная разметка сетки с использованием HTML и CSS. 🚀

Как использовать переменные CSS – объяснено на примерах кода

https://www.freecodecamp.org/news/how-to-use-css-variables/

Сила :has() в CSS

https://css-tricks.com/the-power-of-has-in-css

Невероятные библиотеки анимации JavaScript

https://dev.to/lilxyzz/incredible-javascript-animation-libraries-30on

30 хитрых приемов JavaScript

https://dev.to/mmainulhasan/30-javascript-tricky-hacks-gfc

Преобразуйте и минимизируйте файлы CSS с помощью Lightning CSS.

https://lume.land/plugins/lightningcss

Sass зарекомендовал себя как мощный локально установленный препроцессор, составляющий основу моих проектов на протяжении более десяти лет. Это позволило мне эффективно организовать масштабируемые и стабильные пакеты CSS. Даже сегодня я по-прежнему считаю Sass чрезвычайно мощным инструментом. Тем не менее, когда мы вступаем в 2024 год, нельзя отрицать, что CSS претерпел быстрое развитие. Функции, которые когда-то были уникальными для Sass, теперь встроены в CSS, включая переменные и новейшую особенность: вложенность CSS.

https://dev.to/karsten_biedermann/goodbye-sass-welcome-back-native-css-cf