Tailwind CSS
Раньше мы делали так:
- bg-green-500 bg-opacity-50
- text-green-500 text-opacity-50
Теперь можно делать так:
- bg-green-500/50
- text-green-500/50
И даже так:
- bg-green-500/[0.5]
- text-green-500/[0.5]
*начиная с версии 2.2 при использовании JIT.
#tailwind #tailwindcss
Раньше мы делали так:
- bg-green-500 bg-opacity-50
- text-green-500 text-opacity-50
Теперь можно делать так:
- bg-green-500/50
- text-green-500/50
И даже так:
- bg-green-500/[0.5]
- text-green-500/[0.5]
*начиная с версии 2.2 при использовании JIT.
#tailwind #tailwindcss
Шпаргалка по Tailwind CSS
Полезный ресурс, содержащий все свойства на одной странице с удобным поиском.
https://nerdcave.com/tailwind-cheat-sheet
#tailwind #tailwindcss
Полезный ресурс, содержащий все свойства на одной странице с удобным поиском.
https://nerdcave.com/tailwind-cheat-sheet
#tailwind #tailwindcss
This media is not supported in your browser
VIEW IN TELEGRAM
Выбор цвета для Tailwind CSS
Если вы используете Tailwind CSS, то знаете, что иногда не просто подобрать правильный цвет из готового набора, чтобы он сочетался с дизайном.
Решение есть! Специальный инструмент под названием Tint - это Color Picker, который при наведении на любой цвет показывает название класса в Tailwind.
Я особо не занимаюсь вёрсткой, но всё равно прикупил себе этот маленький полезный "подборщик" цвета.
https://beyondco.de/software/tint
P.S.: только для MacOS 😜
#tailwind #tools
Если вы используете Tailwind CSS, то знаете, что иногда не просто подобрать правильный цвет из готового набора, чтобы он сочетался с дизайном.
Решение есть! Специальный инструмент под названием Tint - это Color Picker, который при наведении на любой цвет показывает название класса в Tailwind.
Я особо не занимаюсь вёрсткой, но всё равно прикупил себе этот маленький полезный "подборщик" цвета.
https://beyondco.de/software/tint
P.S.: только для MacOS 😜
#tailwind #tools
Вышел Tailwind CSS v3
Вчера вышло обновление популярного CSS-фреймворка Tailwind 🥳 которое принесло ряд клёвых фишек в и без того замечательный инструмент.
Рекомендую налить чайку 🫖 и внимательно ознакомиться со списком новинок на официальном блоге:
https://tailwindcss.com/blog/tailwindcss-v3
Кстати, дизайн сайта и документации тоже обновились.
Ура, товарищи! 🎉
#tailwind
Вчера вышло обновление популярного CSS-фреймворка Tailwind 🥳 которое принесло ряд клёвых фишек в и без того замечательный инструмент.
Рекомендую налить чайку 🫖 и внимательно ознакомиться со списком новинок на официальном блоге:
https://tailwindcss.com/blog/tailwindcss-v3
Кстати, дизайн сайта и документации тоже обновились.
Ура, товарищи! 🎉
#tailwind
DevTools для Tailwind
Привет, парни! Вышло расширение для браузера, которое помогает верстать на Tailwind CSS.
Основная фишка в том, что при использовании JIT, который теперь идёт по-умолчанию в Tailwind, автоматом удаляются не используемые классы - это круто!
Однако, когда мы пытаемся добавлять классы в HTML прямо в браузере, то НЕ видим результат, потому что этого класса просто НЕТ в нашем CSS-файле - это не удобно.
Расширение для браузера решает эту проблему. Теперь можно добавлять любые классы из фреймворка прямо в окне расширения и сразу видеть результат на странице.
При чем это работает даже с произвольными значениями типа w-[123px] и конечно автодополнение (подсказки), что очень удобно!
Инструмент платный (2к рублей), но я сразу прикупил и буду тестировать. Думаю оно того стоит.
https://devtoolsfortailwind.com
#tailwind #tools
Привет, парни! Вышло расширение для браузера, которое помогает верстать на Tailwind CSS.
Основная фишка в том, что при использовании JIT, который теперь идёт по-умолчанию в Tailwind, автоматом удаляются не используемые классы - это круто!
Однако, когда мы пытаемся добавлять классы в HTML прямо в браузере, то НЕ видим результат, потому что этого класса просто НЕТ в нашем CSS-файле - это не удобно.
Расширение для браузера решает эту проблему. Теперь можно добавлять любые классы из фреймворка прямо в окне расширения и сразу видеть результат на странице.
При чем это работает даже с произвольными значениями типа w-[123px] и конечно автодополнение (подсказки), что очень удобно!
Инструмент платный (2к рублей), но я сразу прикупил и буду тестировать. Думаю оно того стоит.
https://devtoolsfortailwind.com
#tailwind #tools
Несколько TailwindCSS в одном проекте
Задача
1. У нас есть сайт с панелью администратора на TailwindCSS.
2. В CSS-файле админки НЕ должно быть классов от основного сайта (и наоборот).
Проблема
1. В TailwindCSS есть крутая функция, которая оставляет только CSS-классы из нашей вёрстки.
2. Вопрос - как разделить конфигурацию TailwindCSS для админки и основного сайта, чтобы они НЕ пересекались?
Решение
1. Мы можем указать TailwindCSS какой файл конфигурации использовать в каждом случае.
2. При использвании LaravelMix мы просто передаём название файла конфигурации отдельно для основного сайта и админки.
На скринах 2 отдельные конфигурации TailwindCSS для основного сайта (tailwind-app.config.js) и админки (tailwind-admin.config.js), а так же пример их сборки через LaravelMix с указанием конкретного конфига.
Полезно? Сделай репост! 👍
#tailwind #tools #mix
Задача
1. У нас есть сайт с панелью администратора на TailwindCSS.
2. В CSS-файле админки НЕ должно быть классов от основного сайта (и наоборот).
Проблема
1. В TailwindCSS есть крутая функция, которая оставляет только CSS-классы из нашей вёрстки.
2. Вопрос - как разделить конфигурацию TailwindCSS для админки и основного сайта, чтобы они НЕ пересекались?
Решение
1. Мы можем указать TailwindCSS какой файл конфигурации использовать в каждом случае.
2. При использвании LaravelMix мы просто передаём название файла конфигурации отдельно для основного сайта и админки.
На скринах 2 отдельные конфигурации TailwindCSS для основного сайта (tailwind-app.config.js) и админки (tailwind-admin.config.js), а так же пример их сборки через LaravelMix с указанием конкретного конфига.
Полезно? Сделай репост! 👍
#tailwind #tools #mix
🔥15👍10
TailwindCSS продолжает удивлять
Теперь мы можем применять стили к дочерним элементам одним махом.
Эта фича называется arbitrary variants - запомни, чтобы потом быстрее искать в документации.
Больше примеров по ссылке:
https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants
Пиши что думаешь! ☝️
#tailwind
Теперь мы можем применять стили к дочерним элементам одним махом.
Эта фича называется arbitrary variants - запомни, чтобы потом быстрее искать в документации.
Больше примеров по ссылке:
https://tailwindcss.com/blog/tailwindcss-v3-1#arbitrary-values-but-for-variants
Пиши что думаешь! ☝️
#tailwind
👍14
Компоненты для Tailwind CSS
Многим из нас после Bootstrap непривычно использовать Tailwind, потому что там нет готовых компонентов.
На самом деле уже есть куча платных и бесплатных готовых компонентов для Tailwind. Ниже один из примеров.
FlowBite - ресурс с тремя десятками готовых компонетов для Tailwind. Кнопки, формы, меню, аккордионы - есть все основные элементы UI.
Еще библиотека даёт нам JS-файл, в котором так же реализованы популярные функции для компонентов.
https://flowbite.com
Спасибо, что присылаете годноту!
#tailwind #tools
Многим из нас после Bootstrap непривычно использовать Tailwind, потому что там нет готовых компонентов.
На самом деле уже есть куча платных и бесплатных готовых компонентов для Tailwind. Ниже один из примеров.
FlowBite - ресурс с тремя десятками готовых компонетов для Tailwind. Кнопки, формы, меню, аккордионы - есть все основные элементы UI.
Еще библиотека даёт нам JS-файл, в котором так же реализованы популярные функции для компонентов.
https://flowbite.com
Спасибо, что присылаете годноту!
#tailwind #tools
👍7❤3
Адаптивное видео (пропорции)
Продолжаем тему вёрстки. Иногда нам нужно сделать адаптивное видео (или другой элемент с соблюдением пропорции - отношение ширины к высоте).
У этой задачи есть классическое решение - использовать абсолютное позиционирование и верхний внутренний отступ (например padding-top: 56.25%).
Однако не многие знают (мы теперь знаем!), что есть CSS-свойство aspect-ratio, которое как раз решает эту задачу очень просто 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
Кстати, Tailwind конечно имеет удобные классы для работы с этим свойством, например aspect-video - и адаптивное видео 16/9 готово! Так просто 😃 На сайте можно подвигать видео за ползунок справа от него и убедиться, что оно адаптивное 👇
https://tailwindcss.com/docs/aspect-ratio
Поддержка браузерами в принципе НЕ плохая - 86%. Все версии браузеров, выпущеные с 2021 года поддерживают:
https://caniuse.com/?search=aspect-ratio
Будем иметь ввиду!
#html #css #tailwind #tip
Продолжаем тему вёрстки. Иногда нам нужно сделать адаптивное видео (или другой элемент с соблюдением пропорции - отношение ширины к высоте).
У этой задачи есть классическое решение - использовать абсолютное позиционирование и верхний внутренний отступ (например padding-top: 56.25%).
Однако не многие знают (мы теперь знаем!), что есть CSS-свойство aspect-ratio, которое как раз решает эту задачу очень просто 👇
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
Кстати, Tailwind конечно имеет удобные классы для работы с этим свойством, например aspect-video - и адаптивное видео 16/9 готово! Так просто 😃 На сайте можно подвигать видео за ползунок справа от него и убедиться, что оно адаптивное 👇
https://tailwindcss.com/docs/aspect-ratio
Поддержка браузерами в принципе НЕ плохая - 86%. Все версии браузеров, выпущеные с 2021 года поддерживают:
https://caniuse.com/?search=aspect-ratio
Будем иметь ввиду!
#html #css #tailwind #tip
👍10