Всем привет. Планирую большой проект на реакте (next.js) Выбираю инструменты для работы,

Question

Всем привет. Планирую большой проект на реакте (next.js) Выбираю инструменты для работы,

изучаю подходы.
Наткнулся на расхайпованный tailwind.css
У него масса очевидных недостатков на которых закрывают многие глаза.
Потому я хочу его взять как библиотеку позволяющую мне писать классы для сущностей не имеющих четкой регламентации и не пренадлежащие конкретному маленькому компоненту (атому), то есть применять для составных компонентов или просто верстке локального статического характера (молекулы, организмы).
Сами же компоненты писать в привычном мне стиле - css/scss модули.
Сами tailwind не рекомендуют такой подход почему-то..

Отсюда вопрос к комьюнити - стоит ли использовать tailwind.css подходы для написания самих компонентов? То есть пойти по одному из путей
- использовать классы в html (аргумент - компоненты именованные и их разметка изолирована и нет тех проблем с реиспользованием пачки классов в рамках куска разметки повторно где-то еще, так как оперируем именами компонентов.
- использовать утилитарные хелперы по типу @apply в глобальном css (изолированно описывать компоненты выходит что не получится)
- использовать обычные css модули для компонента но внутри обращаться к глобальным переменным если они заданы

В интернете я вижу что народ создавая компоненты react использует tailwind как раз таки чтоб не парится над именованием и прыганием между кодом и стилями, но мне кажется проблемой видеть раздутый html даже на уровне маленьких компонентов.
Считаете ли вы нормальным брать tailwind только как хелпер-библиотеку для задания стилей элементам не являющимся мелкими компонентами, а например для описания связей компонентов в композициях (система отступов и размеры шрифтов с адаптивностью для кастомных текстов как пример)?

Спасибо.

#frontend #javascript #programming #react.js #russian

0

16.12.2021

4 ответов

24 просмотра

Znacovean Simion ... Автор вопроса

ну если не брать то полюбому нужно глобально держать и писать свой набор утилит для отступов как минимум а в последней версии tailwind можно это делать в рантайме создавая нужный класс и стили появятся при сборке нужно тебе например разделить 2 инпута отступом className="mb-[15px] xl:mb-[25px]" и не нужно создавать свой набор утилит который потом ещё через purge обрабатывать чтоб ненужное в прод не попадало

0

16.12.2021

Max Kiner

Znacovean Simion ...
ну если не брать то полюбому нужно глобально держа...

Обернуть в div с gap, и не нужно никаких утилит

0

16.12.2021

Znacovean Simion ... Автор вопроса

Max Kiner
Обернуть в div с gap, и не нужно никаких утилит

ну так gap это тоже утилита) я просто как пример привел кейса)

0

16.12.2021