My favorite way to practice tailwind

Подписаться 222 тыс.

Просмотров 13 тыс.

50% 1

icodethis.com/
not sponsored; cool site
📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
🤖 SaaS I'm Building: www.icongeneratorai.com/
▶️ Generate Chapters: ytchaptersgenerator.com/
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

Опубликовано:

17 дек 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

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

@captainnoyaux 7 месяцев назад

That's awesome, seeing you design it live and explaining your thought process is really valuable, I'd love to see you take more of theses challenges !

@FlorinPop 7 месяцев назад

Thank you for sharing iCodeThis! We’re glad you like it! 😃

@hoangtran-ek8mn 7 месяцев назад

Love this. Hope for more tailwind videos with the most common component.

@JollyCoding 7 месяцев назад

December is a busy month with all these challenges! Tailwind one is awesome though didn’t realise iCodeThis had this cheers!

@witchmorrow 7 месяцев назад

very useful to see how you work through this and how you use AI and stuff like that thanks

@SeibertSwirl 7 месяцев назад

Love it!

@joshuwa3953 7 месяцев назад

Can you do more react interview / take homes

@randomforest_dev 7 месяцев назад

When writing CSS, the major issue is making pixel perfect... Would be awesome if you do a video on showing how to do write pixel perfect CSS from Figma file to HTML & CSS!

@WebDevCody 7 месяцев назад

I wouldn't suggest trying to get pixel perfect. With how many different devices there are out there, it's a big waste of effort imo.

@oscarljimenez5717 7 месяцев назад

Pixel perfect can only be achieved with a correct style system.

@xyczz 7 месяцев назад

@@oscarljimenez5717 Not sure what you mean by a correct style system but Tailwind definitely have the possibility of achieving pixel perfection. As an example in Tailwind if you really want something to be adjusted to pixel level you can use arbitrary value syntax such as: "height-[1px]" even if you havn't customized your config. Of course this works with any type of unit and class. However trying to hardcode by pixels is problematic when working with responsive design as Cody hinted at and even if you get it right it will likely be broken for devices in the future. I.e. big waste of effort.

@oscarljimenez5717 7 месяцев назад

@@xyczz pixel perfect don't have to do anything with Tailwind or the css tool you wanna use. What i meant is that you need to mix forces with a design team that will focus on those things of multiple devices, having a consistent variables across all of your apps, etc. Then you have to build the design system in code, and find a way to mix code with design, if you're trying to do a designer job while you're a developer, yeah, then is a waste of time.

@eshw23 7 месяцев назад

My favorite way to practice Tailwind: Practice normal CSS.

@oscarljimenez5717 7 месяцев назад

i have a better way...not using tailwind :)

@emmanuelezeagwula7436 7 месяцев назад

what do you use then ?

@witchmorrow 7 месяцев назад

sounds like a worse way

@oscarljimenez5717 7 месяцев назад

@@witchmorrow I'm just kidding bro, but there's more and better ways than only Tailwind. But Tailwind is good enough for the majority of use cases in simple projects.

@oscarljimenez5717 7 месяцев назад

Btw, I don't like writing un pure css either.

@user-pq8zg6rx8c 7 месяцев назад

Hi there, devs! I have a question that am struggling at for about a week. I know it doesn’t reference the video topic, but I appreciate all help you can give. I am doing react(vite) Frontend on my job. There is a task to implement Notifications in browser(even when it’s in foreground). So I decided to use service worker for that. But then I run into issue: I subscribe for event source, that sends me messages. It requires authentication token, so I use @microsoft/fetch-event-source to specify token. So I can’t simply import that library in worker since it doesn’t support import. What should I do? Maybe there is any better solution for handling notifications without loading main thread?

@WebDevCody 7 месяцев назад

why are you using a service worker? what is the event source? a websocket? Server sent evennts?

@user-pq8zg6rx8c 7 месяцев назад

@@WebDevCody that almost the same thing, but unidirectional (mean you can only subscribe for channel on Frontend and can’t send any message to backend). Event source is a way to suscribe for SSE(server sent event) channel in js. And the reason to use service worker is way js works. You simply can’t receive notifications if your application tab is not in focus or your browser not in focus. But service worker can handle that