Как правильно адаптировать секции на Tailwind css?

Question

[Joxa123]

Решил взять простой макет чтобы понять как работает Tailwind. Столкнулся с такой проблемой, что не могу красиво адаптировать сайт используя тег container. дело в том что в контейнере на все девайсы брейкпоинты и на брейкпоинтах очень некрасиво сжимается.
И не могу понять как красиво сверстать макет на 1140px.
Просто самому бутстраповскую 12 колоночную систему создать с паддингами?

Ну и как сверстать макет где дают только ПК версию и просят использовать Tailwind css если там Mobile first с использованием в контейнерах min-width? Пока думаю просто перебить на max-width но может есть другой способ

Comments

[Sanes]

Там же вроде есть гриды и флексы. На них можно делать.
https://tailwindcss.com/docs/flex-basis

[godsplane]

контейнер тайлвинда можно сделать десктоп ферст, тогда не будет сжиматся , гуглится по запросу "tailwind container max-width"

[Ankhena]

Ну и как сверстать макет где дают только ПК версию и просят использовать Tailwind css если там Mobile first с использованием в контейнерах min-width?

Если по ТЗ брейкпоинты должны идти mobile-first, то так и делать.
Можно сверстать сначала десктоп, потом внести соответствующие корректировки. Потом навостритесь сразу писать mobile first, даже при одном десктопном макете.

Answer 1

[Антон Антон]

Там есть desktop-first вариант, для отдельных мобильных доработок можно использовать max-<breakpoint>: https://tailwindcss.com/docs/responsive-design#tar... https://tailwindcss.com/blog/tailwindcss-v3-2#max-...
Контейнер в тэилвайнд это немного не то, что в бутстрапе, это просто блок со ступенчатой шириной. А 12 колонок (или сколько нужно, хоть 4, хоть 7, хоть неравномерные) можно создать через grid https://tailwindcss.com/docs/grid-template-columns или flex + flex-basis https://tailwindcss.com/docs/flex-basis , хоть в контейнере, хоть без него.

Comments

[Joxa123]

А как без контейнера создавать сайты на flex/grid? просто создаю див и даю ему margin auto. padding или переписать а дополнить в tailwind сам класс container. Хочу понять именно на практике какой стандарт. Ютубе просто легкие обучалки, а видео с реального проекта с использованием всех стандартов не нашел

[Антон Антон]

Joxa123, marginauto нужен только для центрирования дива. если это единственное, что нужно, то max-width и margin auto достаточно. Что такое "создавать сайты на flex/grid" не очень понятно. эти понятия - просто свойство display у блока, в tailwind для этого есть классы, но сначала рекомендую разобраться с этими свойствами без фреймворков: https://habr.com/ru/articles/467049/ https://habr.com/ru/articles/656245/ и подобные статьи