Что такое Tailwind CSS?
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- #Tailwind #TailwindCSS #CSS
Tailwind это супер простой и расширяемый способ работать с CSS. Tailwind состоит из множества классов утилит уже готовых к использованию.
В production все неиспользуемые css классы удаляются из сборки и таким образом остается лишь минимальный набор только необходимых классов и результирующий бандл будет занимать мало места.
Из коробки в TailwindCSS уже поддерживаются классы для разных размеров экрана - с помощью префиксов брейкпоинтов (sm) можно изменять внешний вид компонентов.
Все псевдоклассы также доступны - focus/hover/active и т.д. В зависимости от состояния элемента можно управлять внешним видом добавляя необходимые утилиты классы.
Помимо стандартных цветовых тем или размеров можно указывать свои в зависимости от дизайн системы приложения.
Мы в соцсетях:
💻 Сайт: it-dev-journal.ru
💻 Telegram: t.me/devmagazinechannel
💻 Twitter: / _devmagazine
💻 GitHub: github.com/vadimkorr
☕️ Поддержать канал: www.donationalerts.com/r/devm...
Курсы и плейлисты:
💡 Tailwind: • 🍃 TailwindCSS курс
💡 Redux Saga: • 🍏 Redux Saga курс
💡 Все о ReactJS: • 📘 ReactJS
💡 Как пройти ReactJS собеседование: • 🚀 Собеседование React ...
💡 ReactJS хуки: • 🐠 React хуки
💡 Redux: • ☕️ Redux курс
💡 Как создать слайдер на ReactJS: • 🎪 Как создать СЛАЙДЕР ...
💡 Svelte: • 🌴 Svelte курс
💡 Sass: • 📔 Sass курс
💡 GraphQL: • 💪 GraphQL
💡 JavaScript: • 📜 JavaScript
00:00 - Введение
00:15 - Что такое Tailwind css
01:01 - Отличия от обычного CSS
01:33 - Особенности Tailwind
03:44 - Tailwind и Bootstrap
#devmagazine #devmagazinechannel
Хороший канал, по доходчивости просто вышка (смотрю сейчас все по реакту). Думаю, я подписался навсегда.
Как приятно! Большое спасибо!)
Не останавливайся! Я устроился после года обучения на фронтенд, и столько всего надо подтягивать и учиться на работе, чтобы стать крутым разрабом с зп +200к!=) А ты помогаешь конкретно каждый раз. Не смотри на просмотры, знай, тебя смотрят много спецов, которые нуждаются в контенте))))))
Это радует! Спасибо!)
Но просмотров пока маловато...
@@DevMagazineChannel мужик, у тебя уроки на продвинутые темы, большинство же даже с версткой не знакомы, не то что с сагами. Добавляем сюда в принципе тему разработки не очень то популярную на фоне котиков и челленджей, отсюда и просмотры. Но если ты захочешь монетизировать потом свои труды, то аудитория, которая смотрит про саги видосы уже явно на работе, платежеспособная)))))
@@DevMagazineChannel Попрошу у тебя видосов про тс, конкретно как типизировать стейт менеджеры и сам реакт. Ну и про мобХ , либо тулкит интересно было бы послушать. Спасибо тебе
@@DevMagazineChannel Ты молодец чувак не бросай это дело), если что подумай о коллаборации с другими ютуберами их много, ну варианты есть
вроде звук улучшился? автору респект за работу
Спасибо!)
А если я хочу менять стили в зависимость от useState? (true/false). с mui это решается легко передачей пропсов, так как там css в Js файле, а тут есть что-то подобное?
Сколько не смотрю на tailwind, не могу понять, зачем он нужен? Знаю, что многие аутсорс компании переходят на него. Но уж лучше использовать БЭМ. Разметка будет намного проще в поддержке.
У вас есть путаница в концепциях, что, зачем и где нужно использоваться. БЭМ - методология наименования, созданная для того чтобы css имена стилей не переплетались; т.е. его юзают в том случае, когда у нас есть отдельная папка под глобальный styles. Если вы используете подход css in js или css components, то БЭМ там не нужен. tailwind предлагает быстрое решение за счет готовый css стилей utilities, у bootstrap другой подход - компонентный. tailwind лучше кастомизируется и проще, чем bootstrap и подобные либы. С tailwind вам придется самим создавать компонент за счет использовать атомарных стилей. Атомарность означает неделимость, т.е. разработчики спроектировали таким образом эту либу, чтобы пользователь мог максимально настраивать.
Очень часто при реализации своих компонентов используют утилитарные классы, чтобы добавить отступов, цвет и т.д. И чтобы самим каждый раз под разные проекты не реализовывать, придумали tailwind, набор утилитарных классов. В проекте импортируешь это библиотеку и используешь из набора утилитарных классов те, что нужны. Неиспользуемые - удаляются.
Тейлвинд, как и все ксс фреймворки (и стайлед компонентс вместе с ними) это зло. Сцсс и бемчик это все, что нужно.
я так понимаю что фреймворки используют для того чтобы были стандарты. Использовать массовый инструмент выгоднее.
@@fantast2568 ну иногда грамотная верстка по бэм выглядит куда читабельнее и переиспользуемой чем такое полотно из стилей прям в елементе
@@aleksandrmatyka3118 Ясно, у меня нет большого опыта. Интересно конечно как делают верстку в средне-крупных проектах.
@@fantast2568 Та все по разному) ну не в рамках одного проекта конечно ахаха
Почему зло, если не важен кастомный дизайн, то можно и заюзать для скорости