Tailwind CSS: использовать или не использовать
На самом деле использовать или не использовать какие-либо CSS фреймворки каждый решает для себя сам. Конечно, идеального инструмента не бывает и у Tailwind тоже есть свои достоинства и недостатки.
В этой статье автор рассказал об особенностях фреймворка, его плюсах и минусах, руководствуясь собственным опытом:
https://tprg.ru/cRf0
#tailwind #css
На самом деле использовать или не использовать какие-либо CSS фреймворки каждый решает для себя сам. Конечно, идеального инструмента не бывает и у Tailwind тоже есть свои достоинства и недостатки.
В этой статье автор рассказал об особенностях фреймворка, его плюсах и минусах, руководствуясь собственным опытом:
https://tprg.ru/cRf0
#tailwind #css
Быстрый способ настройки Tailwind в React
Tailwind создан для упрощения создания и использования CSS-стилей, а React в разы облегчает работу с JS. Так давайте объединим их!
В этой статье автор рассказал и показал, как настроить Tailwind в React для ещё более быстрого и удобного создания компонентов:
https://tprg.ru/wBGN
#css #react #tailwind
Tailwind создан для упрощения создания и использования CSS-стилей, а React в разы облегчает работу с JS. Так давайте объединим их!
В этой статье автор рассказал и показал, как настроить Tailwind в React для ещё более быстрого и удобного создания компонентов:
https://tprg.ru/wBGN
#css #react #tailwind
Как использовать Svelte Kit с Tailwind CSS для своевременной компиляции
Давайте выжмем максимум из вашего следующего проекта! В этой статье вы узнаете, как настроить проект с использованием последних версий Svelte и Tailwind:
https://tprg.ru/HiZy
#svelte #tailwind
Давайте выжмем максимум из вашего следующего проекта! В этой статье вы узнаете, как настроить проект с использованием последних версий Svelte и Tailwind:
https://tprg.ru/HiZy
#svelte #tailwind
Tailwind за 100 секунд
Что такое Tailwind, зачем он нужен и как применяется — за 100 секунд расскажет это видео:
https://tprg.ru/opGH
#видео #tailwind
Что такое Tailwind, зачем он нужен и как применяется — за 100 секунд расскажет это видео:
https://tprg.ru/opGH
#видео #tailwind
YouTube
Tailwind in 100 Seconds
Tailwind is a utility-first CSS framework for building websites. It takes a functional approach to web design by providing thousands of tiny classes to use directly in your HTML. Learn why web developers love tailwind in this quick breakdown.
🔗 Resources…
🔗 Resources…
👍1
10 основных функций, представленных в Tailwind CSS v3.0
Tailwind CSS v3.0 был выпущен 9 декабря 2021 года. Эта версия — одна из самых интересных для пользователей Tailwind CSS, ведь в ней огромное количество новых функций. О десяти из них рассказали в этой статье:
https://levelup.gitconnected.com/top-10-features-introduced-in-tailwind-css-v3-0-39f9700b12a1
#tailwind
Tailwind CSS v3.0 был выпущен 9 декабря 2021 года. Эта версия — одна из самых интересных для пользователей Tailwind CSS, ведь в ней огромное количество новых функций. О десяти из них рассказали в этой статье:
https://levelup.gitconnected.com/top-10-features-introduced-in-tailwind-css-v3-0-39f9700b12a1
#tailwind
👍6
Большая интерактивная шпаргалка по Tailwind CSS
В Tailwind столько возможностей и настроек, что запомнить все из них крайне трудно, да и не очень-то нужно. Особенно когда под рукой есть шпаргалка, где все основные настройки удобно сгруппированы и обозначены.
У вас её ещё нет? Тогда скорее забирайте:
https://flowbite.com/tools/tailwind-cheat-sheet/?ref=producthunt
#tailwind #шпаргалка
В Tailwind столько возможностей и настроек, что запомнить все из них крайне трудно, да и не очень-то нужно. Особенно когда под рукой есть шпаргалка, где все основные настройки удобно сгруппированы и обозначены.
У вас её ещё нет? Тогда скорее забирайте:
https://flowbite.com/tools/tailwind-cheat-sheet/?ref=producthunt
#tailwind #шпаргалка
👍8👏2
Bulma против Tailwind CSS: какая альтернатива Bootstrap лучше?
Многие слышали или работали с Bootstrap — CSS-фреймворком, который упрощает разработку, избавляя от необходимости писать лишние CSS стили. Если раньше он был незаменимым инструментом для решения этой задачи, то сегодня у него есть альтернативы, или даже конкуренты. Bulma и Tailwind CSS — два популярных фреймворка, которые пытаются превзойти Bootstrap и избавить разработчиков от некоторых его недостатков.
Какой из них справляется с этим лучше, узнаете в этой статье:
https://blog.logrocket.com/bulma-vs-tailwind-css-better-bootstrap-alternative/
#css #tailwind
Многие слышали или работали с Bootstrap — CSS-фреймворком, который упрощает разработку, избавляя от необходимости писать лишние CSS стили. Если раньше он был незаменимым инструментом для решения этой задачи, то сегодня у него есть альтернативы, или даже конкуренты. Bulma и Tailwind CSS — два популярных фреймворка, которые пытаются превзойти Bootstrap и избавить разработчиков от некоторых его недостатков.
Какой из них справляется с этим лучше, узнаете в этой статье:
https://blog.logrocket.com/bulma-vs-tailwind-css-better-bootstrap-alternative/
#css #tailwind
👍18❤3🔥1
Создание индикатора прогресса чтения в React и TailwindCSS
Такой индикатор — это отличная фича для сайта, где могут быть размешены лонгриды или иные материалы с объёмным содержанием. Он позволяет лучше следить за временем и понимать сколько вам осталось до конца текста.
В этой статье вы научитесь реализовывать собственную версию такого индикатора:
https://javascript.plainenglish.io/creating-a-read-progress-bar-in-react-and-tailwindcss-34f84435ab79
#фронтенд #react #tailwind
Такой индикатор — это отличная фича для сайта, где могут быть размешены лонгриды или иные материалы с объёмным содержанием. Он позволяет лучше следить за временем и понимать сколько вам осталось до конца текста.
В этой статье вы научитесь реализовывать собственную версию такого индикатора:
https://javascript.plainenglish.io/creating-a-read-progress-bar-in-react-and-tailwindcss-34f84435ab79
#фронтенд #react #tailwind
🔥16👍7👎1
Как использовать пользовательские шрифты в Tailwind CSS
Если вы работаете с Tailwind, то в этой статье вы сможете узнать, как добавить как веб-шрифты (Google Fonts), так и локально установленные шрифты в ваши проекты Tailwind. Это гарантирует, что вы создадите свой проект именно так, как того хотели.
https://blog.logrocket.com/how-to-use-custom-fonts-tailwind-css/
#css #tailwind
Если вы работаете с Tailwind, то в этой статье вы сможете узнать, как добавить как веб-шрифты (Google Fonts), так и локально установленные шрифты в ваши проекты Tailwind. Это гарантирует, что вы создадите свой проект именно так, как того хотели.
https://blog.logrocket.com/how-to-use-custom-fonts-tailwind-css/
#css #tailwind
👍7
25 мест, где можно найти бесплатные компоненты Tailwind CSS
Работаете с Tailwind? Тогда вы могли столкнуться с такой проблемой, что нужного компонента не было, а где искать вы не знали. Но мы попробуем решить вашу проблему, предложив статью, где собраны аж 25 источников компонентов на любой вкус. Вот она:
https://techrocks.ru/2022/01/24/25-components-libraries-for-tailwind-css/
#tailwind #css
Работаете с Tailwind? Тогда вы могли столкнуться с такой проблемой, что нужного компонента не было, а где искать вы не знали. Но мы попробуем решить вашу проблему, предложив статью, где собраны аж 25 источников компонентов на любой вкус. Вот она:
https://techrocks.ru/2022/01/24/25-components-libraries-for-tailwind-css/
#tailwind #css
👍4
Mailwind — используем Tailwind для создания электронных писем
Mailwind представляет собой версию Tailwind CSS, созданную специально для разработки электронных писем в формате HTML. Если работали с оригиналом, то и тут проблем не возникнет, но зато вы сможете сэкономить кучу времени и сил.
Подробнее об установке и использовании тут:
https://github.com/soheilpro/mailwind
#библиотека #tailwind
Mailwind представляет собой версию Tailwind CSS, созданную специально для разработки электронных писем в формате HTML. Если работали с оригиналом, то и тут проблем не возникнет, но зато вы сможете сэкономить кучу времени и сил.
Подробнее об установке и использовании тут:
https://github.com/soheilpro/mailwind
#библиотека #tailwind
👍22
TailwindCSS — это CSS-фреймворк. Он похож на Bootstrap, Foundation или Bulma, но у него есть несколько фич, за которые его можно полюбить.
И вот небольшая подборка полезных сервисов и шпаргалок, которые вам помогут познакомиться с ним поближе:
— Интерактивный пример почтового ящика Intercom на Tailwind CSS, который поможет попробовать фреймворк на практике: https://play.tailwindcss.com/O2Uz6b4uLs?layout=horizontal
— Tailwind Cheat Sheet, шпаргалка по всем классам утилит и свойствам: https://nerdcave.com/tailwind-cheat-sheet: https://nerdcave.com/tailwind-cheat-sheet
— Meraki UI, набор нескольких готовых компонентов Tailwind CSS, которые можно кастомизировать перед копипастом: https://merakiui.com/components/
— Tailwind.run(), онлайн-площадка для Tailwind CSS с поддержкой пользовательской конфигурации сборки. С её помощью можно посмотреть, как итоговый вариант будет выглядеть на разных устройствах: https://tailwind.run/new
#библиотека #tailwind #инструменты
И вот небольшая подборка полезных сервисов и шпаргалок, которые вам помогут познакомиться с ним поближе:
— Интерактивный пример почтового ящика Intercom на Tailwind CSS, который поможет попробовать фреймворк на практике: https://play.tailwindcss.com/O2Uz6b4uLs?layout=horizontal
— Tailwind Cheat Sheet, шпаргалка по всем классам утилит и свойствам: https://nerdcave.com/tailwind-cheat-sheet: https://nerdcave.com/tailwind-cheat-sheet
— Meraki UI, набор нескольких готовых компонентов Tailwind CSS, которые можно кастомизировать перед копипастом: https://merakiui.com/components/
— Tailwind.run(), онлайн-площадка для Tailwind CSS с поддержкой пользовательской конфигурации сборки. С её помощью можно посмотреть, как итоговый вариант будет выглядеть на разных устройствах: https://tailwind.run/new
#библиотека #tailwind #инструменты
👍19👎3🔥1🤬1
Как создать редактор кода для 40+ языков с помощью React
Хватит делать классические тудушки! Давайте напишем свой редактор кода, чтобы писать код внутри кода, написанного нами.
Если думаете, что это слишком сложно для вас, то эта статья может стать вашим пошаговым руководством. Подробнее:
https://habr.com/ru/company/skillfactory/blog/670380/
#react #tailwind
Хватит делать классические тудушки! Давайте напишем свой редактор кода, чтобы писать код внутри кода, написанного нами.
Если думаете, что это слишком сложно для вас, то эта статья может стать вашим пошаговым руководством. Подробнее:
https://habr.com/ru/company/skillfactory/blog/670380/
#react #tailwind
👍21
TailwindCSS vs. UnoCSS
TailwindCSS и UnoCSS — популярные CSS-фреймворки.
У Tailwind есть имена классов практически для каждой функции CSS, о которой вы могли подумать, включая некоторые полезные, о которых вы, возможно, не знаете, например isolation. В свою очередь, UnoCSS поддерживает весь Tailwind, плюс некоторые дополнительные возможности. Казалось бы, выбор очевиден. Но как бы не так!
Оба фреймворка имеют свои плюсы и минусы. Эта статья включает в себя множество придирок, которые для кого-то будут незначительны, а для кого-то станут полезным открытием и решающим фактором при выборе инструмента для следующего проекта:
https://dev.to/mapleleaf/tailwindcss-vs-unocss-2a53
#фронтенд #css #tailwind #unocss
TailwindCSS и UnoCSS — популярные CSS-фреймворки.
У Tailwind есть имена классов практически для каждой функции CSS, о которой вы могли подумать, включая некоторые полезные, о которых вы, возможно, не знаете, например isolation. В свою очередь, UnoCSS поддерживает весь Tailwind, плюс некоторые дополнительные возможности. Казалось бы, выбор очевиден. Но как бы не так!
Оба фреймворка имеют свои плюсы и минусы. Эта статья включает в себя множество придирок, которые для кого-то будут незначительны, а для кого-то станут полезным открытием и решающим фактором при выборе инструмента для следующего проекта:
https://dev.to/mapleleaf/tailwindcss-vs-unocss-2a53
#фронтенд #css #tailwind #unocss
🤮6🤡2👍1💩1
Создание портфолио
В статье автор рассказывает о том, как он с нуля создал свой персональный сайт на React и Tailwind CSS. Он делится кодом основных компонентов: навигационной панели, главной страницы, разделов образования и проектов.
Прочитав статью, вы узнаете, как добавить анимацию текста, иконки социальных сетей и настроить маршрутизацию. Но самое главное — вы сможете вдохновиться и создать свой собственный уникальный сайт-визитку.
#react #tailwind #портфолио
В статье автор рассказывает о том, как он с нуля создал свой персональный сайт на React и Tailwind CSS. Он делится кодом основных компонентов: навигационной панели, главной страницы, разделов образования и проектов.
Прочитав статью, вы узнаете, как добавить анимацию текста, иконки социальных сетей и настроить маршрутизацию. Но самое главное — вы сможете вдохновиться и создать свой собственный уникальный сайт-визитку.
#react #tailwind #портфолио
🤣16🔥3👍1
Если пропустили, тут создали сервис Screenshot to Code, который позволяет сделать идентичную страницу по скриншоту
Достаточно загрузить скриншот страницы и получить HTML-, Tailwind-, JS-код. Работает на GPT-4 Vision API, поэтому нужен ваш ключ. Репозиторий на гитхабе: https://github.com/abi/screenshot-to-code
Результат не идеальный и верстальщики пока могут выдохнуть, но для старта очень даже неплохо.
#ии #javascript #tailwind #фронтенд
Достаточно загрузить скриншот страницы и получить HTML-, Tailwind-, JS-код. Работает на GPT-4 Vision API, поэтому нужен ваш ключ. Репозиторий на гитхабе: https://github.com/abi/screenshot-to-code
Результат не идеальный и верстальщики пока могут выдохнуть, но для старта очень даже неплохо.
#ии #javascript #tailwind #фронтенд
😁9🤯8👍4❤2