Загрузка видео...

Не удалось загрузить видео

На главную

Just added a Tailwind CSS UI block directly to my Lovable app by installing 2 npm packages, creating a blank component called hero.tsx, and then just pasting in the Tailwind code. Pixel perfect responsive design that cost me pretty much nothing and took me 1 minute to do. Next...

_gregoryjohn's profile picture

Gregory John

10,151 subscribers

18,045 просмотров • 1 год назад •via X (Twitter)

ИскусствоНаука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

Added a glow feature to my shadcn cards with tailwind v4, no component duplication, just blendmode and css shananigans ✨
0:14

Added a glow feature to my shadcn cards with tailwind v4, no component duplication, just blendmode and css shananigans ✨

Dev Ed

60,593 просмотров • 1 год назад

The future of AI in web development? This app generates code and images to convert a screenshot into HTML/Tailwind CSS. I just gave it a screenshot of my X feed, and look what it produced (Notes & link in the comments):
0:10

The future of AI in web development? This app generates code and images to convert a screenshot into HTML/Tailwind CSS. I just gave it a screenshot of my X feed, and look what it produced (Notes & link in the comments):

Alvaro Cintas

303,511 просмотров • 2 лет назад

I’m creating a playground of CSS easing functions 🌟 Each animation will include an SVG preview, along with a ready-to-copy Tailwind CSS class. Launching next week 🔥
0:12

I’m creating a playground of CSS easing functions 🌟 Each animation will include an SVG preview, along with a ready-to-copy Tailwind CSS class. Launching next week 🔥

Pasquale Vitiello

35,479 просмотров • 1 год назад

Figma’s new grid layout is sweet. Finally easy to build responsive modular grids fast. Then dropped it into Lovable to vibe code -built the UI, animations, backend and everything for a AI Prompt Library that I'm sharing with my class. Come learn with me in my 4-week AI Workshop. Learn more below, registrations open for the next 7 days. All images and assets were created in Midjourney, FloraAI and ChatGPT.
0:11

Figma’s new grid layout is sweet. Finally easy to build responsive modular grids fast. Then dropped it into Lovable to vibe code -built the UI, animations, backend and everything for a AI Prompt Library that I'm sharing with my class. Come learn with me in my 4-week AI Workshop. Learn more below, registrations open for the next 7 days. All images and assets were created in Midjourney, FloraAI and ChatGPT.

Nguyen Le

73,820 просмотров • 1 год назад

Brought back the ability to copy colors from the Tailwind docs — regular click will copy the OKLCH value, shift+click will copy the nearest hex value 👍🏻 Useful for Figma and stuff, or to just steal our colors and use them with some other CSS framework you hate less.
0:14

Brought back the ability to copy colors from the Tailwind docs — regular click will copy the OKLCH value, shift+click will copy the nearest hex value 👍🏻 Useful for Figma and stuff, or to just steal our colors and use them with some other CSS framework you hate less.

Adam Wathan

44,351 просмотров • 1 год назад

Figma design vs Claude Code output Here's my workflow: → Built the component on shadcn/ui foundations → Wrote a SKILLS.md file that systematized design-token extraction (included inputs, extraction protocol, tech selection, tailwind rules, layout etc) → Fed Claude the Figma CSS + 2x-scaled component PNGs (halved the measurements) → Iterated bit-by-bit in Claude Code until I as satisfied with the output
0:18

Figma design vs Claude Code output Here's my workflow: → Built the component on shadcn/ui foundations → Wrote a SKILLS.md file that systematized design-token extraction (included inputs, extraction protocol, tech selection, tailwind rules, layout etc) → Fed Claude the Figma CSS + 2x-scaled component PNGs (halved the measurements) → Iterated bit-by-bit in Claude Code until I as satisfied with the output

CJ @ Jackie Brown

27,054 просмотров • 3 месяцев назад

After Effects to the next-next level is possible. Learn advanced Expressions and code with ChatGPT. Develop Responsive Motion Graphics Systems. Learn to design and problem-solve when developing Responsive Solutions. Link in the next comment.
0:13

After Effects to the next-next level is possible. Learn advanced Expressions and code with ChatGPT. Develop Responsive Motion Graphics Systems. Learn to design and problem-solve when developing Responsive Solutions. Link in the next comment.

Roland Kahlenberg

10,536 просмотров • 1 год назад

✨ Added a brand new Bento Grids category to Tailwind UI today!
0:11

✨ Added a brand new Bento Grids category to Tailwind UI today!

Adam Wathan

61,877 просмотров • 1 год назад

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer
0:11

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer

Aceternity

43,391 просмотров • 2 лет назад

Responsive profile UI with animated tabs with HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻
0:13

Responsive profile UI with animated tabs with HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

David Mráz

14,508 просмотров • 11 месяцев назад

This week, we're going to rethink how copy and paste works for Tailwind templates. One click of a button and you'll be able to "lift" components from a template. Copy & paste or Edit in v0. Shipping soon.
0:10

This week, we're going to rethink how copy and paste works for Tailwind templates. One click of a button and you'll be able to "lift" components from a template. Copy & paste or Edit in v0. Shipping soon.

shadcn

171,095 просмотров • 2 лет назад

Create responsive footer using just HTML and CSS 🚀 Code in the comments 🧑‍💻
0:11

Create responsive footer using just HTML and CSS 🚀 Code in the comments 🧑‍💻

David Mráz

28,918 просмотров • 2 лет назад

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔
0:11

Tailwind CSS Tip ✨ You can create some cool looking loaders and spinners using Tailwind CSS. Thanks to Tailscan for Tailwind CSS for the inspiration. Demo & Code 👇 (14/30) follow for 16 more tips 🔔

Surjith S M ✪

140,209 просмотров • 3 лет назад

Put together this little demo for the introduction module in this new "Tailwind CSS by Example" course I'm working on. Succinctly covers all of the fundamental elements of building things with Tailwind in one example 👍 Excited to get back in the studio and hit record 🎬
0:15

Put together this little demo for the introduction module in this new "Tailwind CSS by Example" course I'm working on. Succinctly covers all of the fundamental elements of building things with Tailwind in one example 👍 Excited to get back in the studio and hit record 🎬

Adam Wathan

28,667 просмотров • 10 месяцев назад

Shipped a HUGE feature to my library for . Copy an entire design system in just one click. Then paste straight into your project. Comment "Lovable 🚀" below – I'll DM you the private beta link.
0:15

Shipped a HUGE feature to my library for . Copy an entire design system in just one click. Then paste straight into your project. Comment "Lovable 🚀" below – I'll DM you the private beta link.

damien

42,286 просмотров • 10 месяцев назад

My SVG icons won't be boring anymore 🤯 → Microanimations → Ready-to-copy components → CSS and Tailwind supported So simple, so impressive 🔥 #buildinpublic
0:15

My SVG icons won't be boring anymore 🤯 → Microanimations → Ready-to-copy components → CSS and Tailwind supported So simple, so impressive 🔥 #buildinpublic

Bart ⚡

132,998 просмотров • 1 год назад

✨ Big Tailwind Plus update today — we added dark mode support to all of the marketing and application UI blocks! Now you can preview + copy any of these examples with just light mode styles, just dark mode styles, or with both light/dark support 🌒
0:13

✨ Big Tailwind Plus update today — we added dark mode support to all of the marketing and application UI blocks! Now you can preview + copy any of these examples with just light mode styles, just dark mode styles, or with both light/dark support 🌒

Adam Wathan

34,269 просмотров • 10 месяцев назад

its out! +50 Tailwind CSS buttons ready for use: free, no js, easy to integrate with a simple copy-paste This will be my evolving collection, I will add new styles and micro-interactions soon. Feel free to star the GitHub repo for updates
0:13

its out! +50 Tailwind CSS buttons ready for use: free, no js, easy to integrate with a simple copy-paste This will be my evolving collection, I will add new styles and micro-interactions soon. Feel free to star the GitHub repo for updates

Ibelick

131,343 просмотров • 2 лет назад