Ты не можешь построить жизнеспособную дизайн-систему на Tailwind — Часть 1

"Tailwind предполагает использование прямо в коде компонента без написания css" и "Тут же явно смещается акцент на css классы" - ну так в принципе фундаментально атомарные классы TW это просто css классы. если не хватает "из коробки" никто не запрещает создавать свои "компонентны" в tailwind. У них в документации есть об этом отдельная статья. И пример выше наглядно это показывает.

"2) знать хорошо синтаксис Tailwind чтобы мешать его со стилями" - ну так не зная "синтаксиса" инструментария родить сложный продкут не выйдет не важно TW, SASS, REACT "подставь что угодно" не выйдет. Если не заходит концепция TW то может и не стоит пытаться натягивать сову на сверический объект?

Вспомнил сайт nodejs который сделал для них команда vercel если не ошибаюсь и там как раз таки такой подход (был по крайней мере когда я смотрел исходники) что все стили это css modules в которых внутри сделаны классы через @apply tailwindcss - как по мне сомнительное решение ибо это просто shorthand и увеличение css бандла.

Ты не можешь построить жизнеспособную дизайн-систему на Tailwind — Часть 1

популярность shadcn - увы как в песни ВИА "Ленениград" "Любит наш народ всякое г*вн*!"
Сравнивать shadcn и daisyUI не получится так как разные уровни задач и "абстракций" одни просто пропылисосили популярные headless js библиотеки и сделали свое, другие пошли в реализацию css компонентов с мимимизацией js логики на базе tailwind.

daisyUI - https://daisyui.com/components/button/ потыкать можно ту же кнопку и в хедере есть тоглер тем.. эти ребята ушли по пути разработки плагинов/утилит. И вполне разумно если нужно сделать свой велосипед можно подчерпнуть их подходы..



Подход с arbitrary style - это что-то похожее на то как делают в mantine, то есть есть токен --button-text-color который используется в компоненте и с помощью вариаций мы можем переопреледить значение этого токена (переменной) где-то в схеме cva к примеру. "Псевдокод" const styles = cva('...', {variants: {variant:{primary: '[--button-text-color:--ui-my-theme-primary]....}}} отсюда получается что кнопка с вариантом primary будет опиратся на токен --button-text-color, который будет определен из темы tailwind, и в случае необоходимости изменить какие-то цветовые решения нам нужно будет только изменить тему в Tailwind.. почему такие сложные конструкции возникает вопрос а проблема увы есть в TW4 связанная с расширением конфигурационных файлов осбоенно когда нужно накладывать несколько тем импортируя их

PS. касаемо читабельности и универсальности, то есть монструозные sass конструкции с миксинами и прочей изотерикой по вашему читаемо? Видя sass я каждый раз вижу когда программируют на Typescript types aka lisp, ничего не понятно но очень интересно, так что "читаемость" - это что-то на "Субъективщине"

Ты не можешь построить жизнеспособную дизайн-систему на Tailwind — Часть 1

Мне кажется автор не доконца изучил варианты использования. Можно посмотреть не на китайский копипаст shadcn, а к примеру на daisyUi, они ближе интегрированы с ТВ. Плюс вы забываете что можно определять переменные в arbitrary style, и на их основе строить композиции вариантов. Тогда вообще не важно какие там цвета

Я заменил целую команду разработки на ИИ. 0 рублей, 2 недели, 2 приложения

Как поется в песне… «фантазер»

Next.js, PostgreSQL, OAuth, Т-Банк и ни одного разработчика. Как я построил SaaS MVP с помощью AI-агентов

А нюансов с хранением перс данных на супабейз не будет?

Запущен аналог Cursor из России

Это скорее аналог гигакода но не курсора получается

Скормил нейросети 40 статей ПИК с Хабра: RAG-бот на GigaChat для BIM без опыта в разработке

Я все ждал что гигачат кредит оформит

Как мы собрали фронт без фронтендера за неделю: AI-ассистент + дизайн-система

Ну если ии может писать фронты без фронтов , то стоит задуматься а нужны ли тогда бэки?

Мои любимые паттерны для full-stack и frontend-проектов

для таких фабрик ключей для Tanstack есть удобная реализация

function createQueryKeyFactory<

TBase extends string,

TKeys extends Record<string, (...args: any[]) => readonly unknown[]>,

>(base: TBase, keys: TKeys) {

const all = [base] as const;

const factory = {

all,

...Object.entries(keys).reduce(

(acc, [key, fn]) => {

acc[key] = (...args: Parameters<typeof fn>) =>

[base, ...fn(...args)] as const;

return acc;

},

{} as {

[K in keyof TKeys]: (

...args: Parameters<TKeys[K]>

) => readonly [TBase, ...ReturnType<TKeys[K]>];

},

),

} as const;

return factory;

}

Хватит неправильно использовать localStorage в React

Работа с готовым решением везде +/- будет выглядеть так. Статья больше про работу с нативным браузерным апи без molосипедов. Каждый раз смотря на синтаксис чувствую себя Индиана Джонсом в египте

Любимая задачка на знание React

Почему именно задача про загрузку данных? Рассматривали ли вы задачи связанные с context и его особенности ре-рендера? Сколько не посещал таких мероприятий почти всегда было "напишите ка нам хук, где нужно данные получить"