#tailwind_css — Public Fediverse posts

Маркетинговый сайт без дизайнера: 5 практик с Open Design и Claude Code

Я попробовал собрать маркетинговый сайт через Claude Design - и быстро упёрся в лимиты токенов и непрозрачность облачного тула. Перешёл на Open Design - open-source альтернативу, которая цепляет твой Claude Code, держит дизайн-систему как DESIGN.md в репозитории и работает локально. Под катом - четыре практики, которые сработали на сайте конференции: design-as-code в git, симлинк дизайнера в код сайта, два markdown-файла под бренд и дизайн токены, и как мы учили автономных агентов делать сайт с помощью нашей дизайн системы

https://habr.com/ru/articles/1032924/

#claude_code #claude #anthropic #open_design #aiагенты #дизайнсистема #designascode #nextjs #tailwind_css #маркетинговый_сайт

Provant la interfície web alternativa #wappy que estic desenvolupant, a mastodont.cat. Funciona!
Els tuts de la federada arribant en temps real.

https://codeberg.org/spla/wappy

#React #tailwind_css

Tailwind CSS v4 против MUI, Ant Design и Styled Components: архитектурный разбор

В 2026 году выбор инструмента для стилизации — это не вопрос вкуса, а вопрос архитектуры. Мы разберём, где Tailwind CSS v4 выигрывает у признанных лидеров: компонентных библиотек (MUI, Ant Design) и CSS-in-JS решений (Styled Components).

https://habr.com/ru/articles/1006248/

#Tailwind_CSS #CSS #Frontend #Design_System #React #Styled_Components #Верстка #Архитектура #Микрофронтенды #Figma

Tailwind CSS v4 против MUI, Ant Design и Styled Components: архитектурный разбор

В 2026 году выбор инструмента для стилизации — это не вопрос вкуса, а вопрос архитектуры. Мы разберём, где Tailwind CSS v4 выигрывает у признанных лидеров: компонентных библиотек (MUI, Ant Design) и CSS-in-JS решений (Styled Components).

https://habr.com/ru/articles/1006248/

#Tailwind_CSS #CSS #Frontend #Design_System #React #Styled_Components #Верстка #Архитектура #Микрофронтенды #Figma

Tailwind CSS v4 против MUI, Ant Design и Styled Components: архитектурный разбор

В 2026 году выбор инструмента для стилизации — это не вопрос вкуса, а вопрос архитектуры. Мы разберём, где Tailwind CSS v4 выигрывает у признанных лидеров: компонентных библиотек (MUI, Ant Design) и CSS-in-JS решений (Styled Components).

https://habr.com/ru/articles/1006248/

#Tailwind_CSS #CSS #Frontend #Design_System #React #Styled_Components #Верстка #Архитектура #Микрофронтенды #Figma

Tailwind CSS v4 против MUI, Ant Design и Styled Components: архитектурный разбор

В 2026 году выбор инструмента для стилизации — это не вопрос вкуса, а вопрос архитектуры. Мы разберём, где Tailwind CSS v4 выигрывает у признанных лидеров: компонентных библиотек (MUI, Ant Design) и CSS-in-JS решений (Styled Components).

https://habr.com/ru/articles/1006248/

#Tailwind_CSS #CSS #Frontend #Design_System #React #Styled_Components #Верстка #Архитектура #Микрофронтенды #Figma

Genial, al clicar qualsevol avatar de la línia de temps, #wappy mostra el seu perfil en la columna central, amb els comptadors, el botó de seguir o deixar de fer-ho (que funciona perfectament) i tots els seus tuts a sota, amb els comptadors d'interaccions.
Queda molt bé!

#React #Vite #Tailwind_css

Desenvolupar #wappy en el mini PC de casa dona punts extra.

#React #Vite #Tailwind_css

La interfície web per #appy, que he anomenat #wappy, comença a tenir molt bon aspecte.

#React #Vite #Tailwind_css

He afegit el selector de visibilitat a #wappy. wappy és l'interfície web que estic desenvolupant per a #appy

https://codeberg.org/spla/wappy

O sigui, appy és només l'API on es connecten els clients, que poden ser aplicacions (totes les de Mastodon) o pot ser wappy, la interfície web.

#React #Vite #Tailwind_css

AI убила бизнес Tailwind CSS. Компания сократила 75% разработчиков

Парадокс эпохи: фреймворк на пике популярности, трафик и установки растут, но доходы упали в пять раз, и компания оказалась на грани разорения — ещё чуть-чуть, и не хватило бы денег на зарплаты.

https://habr.com/ru/articles/983602/

#tailwind_css #tailwind_labs #bootstrap #adam_wathan #open_source #claude_code

AI убила бизнес Tailwind CSS. Компания сократила 75% разработчиков

Парадокс эпохи: фреймворк на пике популярности, трафик и установки растут, но доходы упали в пять раз, и компания оказалась на грани разорения — ещё чуть-чуть, и не хватило бы денег на зарплаты.

https://habr.com/ru/articles/983602/

#tailwind_css #tailwind_labs #bootstrap #adam_wathan #open_source #claude_code

AI убила бизнес Tailwind CSS. Компания сократила 75% разработчиков

Парадокс эпохи: фреймворк на пике популярности, трафик и установки растут, но доходы упали в пять раз, и компания оказалась на грани разорения — ещё чуть-чуть, и не хватило бы денег на зарплаты.

https://habr.com/ru/articles/983602/

#tailwind_css #tailwind_labs #bootstrap #adam_wathan #open_source #claude_code

AI убила бизнес Tailwind CSS. Компания сократила 75% разработчиков

Парадокс эпохи: фреймворк на пике популярности, трафик и установки растут, но доходы упали в пять раз, и компания оказалась на грани разорения — ещё чуть-чуть, и не хватило бы денег на зарплаты.

https://habr.com/ru/articles/983602/

#tailwind_css #tailwind_labs #bootstrap #adam_wathan #open_source #claude_code

Show HN: Ellipticc Drive – open-source cloud drive with E2E and PQ encryption
https://ellipticc.com
#ycombinator #Ellipticc #cloud_storage #encrypted_cloud_drive #E2EE #post_quantum_encryption #PQC #privacy_first #free_drive #free_cloud_storage #open_source_frontend #secure_file_storage #XChaCha20_Poly1305 #Kyber512 #Dilithium2 #Next_js #Tailwind_CSS

Show HN: Ellipticc Drive – open-source cloud drive with E2E and PQ encryption
https://ellipticc.com
#ycombinator #Ellipticc #cloud_storage #encrypted_cloud_drive #E2EE #post_quantum_encryption #PQC #privacy_first #free_drive #free_cloud_storage #open_source_frontend #secure_file_storage #XChaCha20_Poly1305 #Kyber512 #Dilithium2 #Next_js #Tailwind_CSS

Show HN: Ellipticc Drive – open-source cloud drive with E2E and PQ encryption
https://ellipticc.com
#ycombinator #Ellipticc #cloud_storage #encrypted_cloud_drive #E2EE #post_quantum_encryption #PQC #privacy_first #free_drive #free_cloud_storage #open_source_frontend #secure_file_storage #XChaCha20_Poly1305 #Kyber512 #Dilithium2 #Next_js #Tailwind_CSS

Show HN: Ellipticc Drive – open-source cloud drive with E2E and PQ encryption
https://ellipticc.com
#ycombinator #Ellipticc #cloud_storage #encrypted_cloud_drive #E2EE #post_quantum_encryption #PQC #privacy_first #free_drive #free_cloud_storage #open_source_frontend #secure_file_storage #XChaCha20_Poly1305 #Kyber512 #Dilithium2 #Next_js #Tailwind_CSS

setTimeout убил наши анимации: история спасения модальных окон

Всем привет! Давайте представим, что от бизнеса поступил запрос: "Нам надо, чтобы при входе на сайт сразу же открывалось модальное окно авторизации для сканирования клиентского QR-кода." Вы запускаете стабильно работающий проект, применяете useEffect с необходимой фичей и пустой зависимостью, а затем - начинаете тестировать. И вот незадача: модальное окно открывается на миллисекунду и моментально закрывается. При этом: логи в порядке, стейты меняются корректно, но модальное окно живет своей жизнью и наотрез отказывается работать, как ей предписано. Я потратил довольно длительное время на поиски этой ошибки. Но затем, удалив setTimeout , который мы использовали для анимирования модального окна, заметил, что все стало работать корректно. Длительный поиск вариантов анимирования открытия/закрытия модального окна не помог. Но стоит отметить, что я узнал множество способов и комбинаций его анимирования: как при помощи сторонних зависимостей, так и нативных. Использование сторонних зависимостей я отбросил сразу. Смириться, что все модальные окна на проекте отныне будут работать без красивых анимаций я не мог, поэтому сразу же приступил к поискам решения данной проблемы. Совершенно случайно наткнувшись на статью @GragertVD , которая, словом, не подходила под мои критерии поиска - я открыл для себя совершенно новый обработчик события onAnimationEnd и наконец решил указанную выше проблему. Именно поэтому мне захотелось рассказать о том, как я это сделал. В этой статье я расскажу:

https://habr.com/ru/articles/954624/

#settimeout #onAnimationEnd #React_анимации #useEffect #Tailwind_CSS #createPortal #конфликт_состояний #прерывание_анимаций #Открывается_и_сразу_закрывается #useAnimation_хук

Claude Codeで課題解決！従来のWebサイト開発環境をまるっと刷新してみた
https://dev.classmethod.jp/articles/replaced-old-website-environment-using-claude-code/

#dev_classmethod #Claude_Code #Docker #Next_js #Tailwind_CSS

SaaS is just vendor lock-in with better branding
https://rwsdk.com/blog/saas-is-just-vendor-lock-in-with-better-branding
#ycombinator #RedwoodSDK #RedwoodJS #React #TypeScript #Prisma #Tailwind_CSS #RedwoodJS_SDK #Cloudflare_Development_Platform #response_lifecycle #webapps

SaaS is just vendor lock-in with better branding
https://rwsdk.com/blog/saas-is-just-vendor-lock-in-with-better-branding
#ycombinator #RedwoodSDK #RedwoodJS #React #TypeScript #Prisma #Tailwind_CSS #RedwoodJS_SDK #Cloudflare_Development_Platform #response_lifecycle #webapps

SaaS is just vendor lock-in with better branding
https://rwsdk.com/blog/saas-is-just-vendor-lock-in-with-better-branding
#ycombinator #RedwoodSDK #RedwoodJS #React #TypeScript #Prisma #Tailwind_CSS #RedwoodJS_SDK #Cloudflare_Development_Platform #response_lifecycle #webapps

SaaS is just vendor lock-in with better branding
https://rwsdk.com/blog/saas-is-just-vendor-lock-in-with-better-branding
#ycombinator #RedwoodSDK #RedwoodJS #React #TypeScript #Prisma #Tailwind_CSS #RedwoodJS_SDK #Cloudflare_Development_Platform #response_lifecycle #webapps

現場で使えるAI UI生成ツール「v0」入門～基本機能とローカル開発環境への組み込み方法～
https://dev.classmethod.jp/articles/v0-introduction-and-local-setup/

#dev_classmethod #v0 #React #Tailwind_CSS

FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем фронтенд

Друзья, приветствую! Наконец-то дошли руки до описания второй части нашего большого проекта по работе с выдуманной клиникой «Здоровье Плюс». Я напоминаю, что в рамках этой небольшой серии мы создаем телеграм-бота с MiniApp, основная задача которого — дать пользователям возможность записаться к врачу в удобный день и время. В прошлой части мы полностью закрыли вопрос логики нашего бота. Сегодня мы займемся написанием фронтенда для нашего Telegram MiniApp с использованием современного JS фреймворка Vue.JS 3. К концу статьи мы реализуем полноценный реактивный фронтенд, который одинаково хорошо будет смотреться, как в формате веб-сайта (мобильная и пк-версия), так и в формате Telegram MiniApp.

https://habr.com/ru/companies/amvera/articles/874970/

#vuejs #vue3 #typescript #api #vuejs_api #vuejs3 #tailwind #tailwind_css #vue_tailwind #javascript

FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем фронтенд

Друзья, приветствую! Наконец-то дошли руки до описания второй части нашего большого проекта по работе с выдуманной клиникой «Здоровье Плюс». Я напоминаю, что в рамках этой небольшой серии мы создаем телеграм-бота с MiniApp, основная задача которого — дать пользователям возможность записаться к врачу в удобный день и время. В прошлой части мы полностью закрыли вопрос логики нашего бота. Сегодня мы займемся написанием фронтенда для нашего Telegram MiniApp с использованием современного JS фреймворка Vue.JS 3. К концу статьи мы реализуем полноценный реактивный фронтенд, который одинаково хорошо будет смотреться, как в формате веб-сайта (мобильная и пк-версия), так и в формате Telegram MiniApp.

https://habr.com/ru/companies/amvera/articles/874970/

#vuejs #vue3 #typescript #api #vuejs_api #vuejs3 #tailwind #tailwind_css #vue_tailwind #javascript

FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем фронтенд

Друзья, приветствую! Наконец-то дошли руки до описания второй части нашего большого проекта по работе с выдуманной клиникой «Здоровье Плюс». Я напоминаю, что в рамках этой небольшой серии мы создаем телеграм-бота с MiniApp, основная задача которого — дать пользователям возможность записаться к врачу в удобный день и время. В прошлой части мы полностью закрыли вопрос логики нашего бота. Сегодня мы займемся написанием фронтенда для нашего Telegram MiniApp с использованием современного JS фреймворка Vue.JS 3. К концу статьи мы реализуем полноценный реактивный фронтенд, который одинаково хорошо будет смотреться, как в формате веб-сайта (мобильная и пк-версия), так и в формате Telegram MiniApp.

https://habr.com/ru/companies/amvera/articles/874970/

#vuejs #vue3 #typescript #api #vuejs_api #vuejs3 #tailwind #tailwind_css #vue_tailwind #javascript

FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем фронтенд

Друзья, приветствую! Наконец-то дошли руки до описания второй части нашего большого проекта по работе с выдуманной клиникой «Здоровье Плюс». Я напоминаю, что в рамках этой небольшой серии мы создаем телеграм-бота с MiniApp, основная задача которого — дать пользователям возможность записаться к врачу в удобный день и время. В прошлой части мы полностью закрыли вопрос логики нашего бота. Сегодня мы займемся написанием фронтенда для нашего Telegram MiniApp с использованием современного JS фреймворка Vue.JS 3. К концу статьи мы реализуем полноценный реактивный фронтенд, который одинаково хорошо будет смотреться, как в формате веб-сайта (мобильная и пк-версия), так и в формате Telegram MiniApp.

https://habr.com/ru/companies/amvera/articles/874970/

#vuejs #vue3 #typescript #api #vuejs_api #vuejs3 #tailwind #tailwind_css #vue_tailwind #javascript

Magic UI: UI Library for Design Engineers
https://magicui.design/
#ycombinator #React #Tailwind_CSS #Framer_Motion #Landing_Page #Components #Next_js

New website almost done \o/

#nicegui #tailwind_css

Shadcn: Components that you can copy-paste into your apps
https://ui.shadcn.com/
#ycombinator #Next_js #React #Tailwind_CSS #Server_Components #Radix_UI

Shadcn: Beautifully designed components that you can copy-paste into your apps
https://ui.shadcn.com/
#ycombinator #Next_js #React #Tailwind_CSS #Server_Components #Radix_UI

Tailwind vs BEM — 2 (архитектура)

Статья рассматривает возможные задачи верстки на разных проектах и как с ними справляются две разные архитектуры: Tailwind CSS и ванильный CSS + BEM.

https://habr.com/ru/articles/774814/

#tailwind #tailwindcss #tailwind_css #bem #css #utilityfirst

Tailwind vs BEM — 2 (архитектура)

Статья рассматривает возможные задачи верстки на разных проектах и как с ними справляются две разные архитектуры: Tailwind CSS и ванильный CSS + BEM.

https://habr.com/ru/articles/774814/

#tailwind #tailwindcss #tailwind_css #bem #css #utilityfirst

Tailwind vs BEM — 1 (сравнение производительности)
В этих двух статьях я буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора будет зависеть очень многое на поздних этапах разработки и оно должно быть очень хорошо обосновано. Начну со сравнения производительности. Tailwind позволяет значительно уменьшить размер итогового CSS и тем самым ускорить время отображения страницы. Но это сработает только в том случае, если Tailwind классы будут написаны прямо в HTML коде, а не в виде @apply в CSS. Tailwind уменьшает CSS, но увеличивает HTML. Давайте посчитаем разницу с учетом HTML. Будем сравнивать чистый Tailwind с чистым CSS + BEM.
#tailwind #tailwindcss #tailwind_css #bem #css #utilityfirst
https://habr.com/ru/articles/774524/

Tailwind vs BEM — 1 (сравнение производительности)
В этих двух статьях я буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора будет зависеть очень многое на поздних этапах разработки и оно должно быть очень хорошо обосновано. Начну со сравнения производительности. Tailwind позволяет значительно уменьшить размер итогового CSS и тем самым ускорить время отображения страницы. Но это сработает только в том случае, если Tailwind классы будут написаны прямо в HTML коде, а не в виде @apply в CSS. Tailwind уменьшает CSS, но увеличивает HTML. Давайте посчитаем разницу с учетом HTML. Будем сравнивать чистый Tailwind с чистым CSS + BEM.
#tailwind #tailwindcss #tailwind_css #bem #css #utilityfirst
https://habr.com/ru/articles/774524/