Advanced TailwindCSS Techniques You Have To Know?! [8 concepts]

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

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

50% 1

In this video we cover 8 of the more advanced TailwindCSS concepts that will help you really maximise your utility with the CSS framework. These include hover & group hover, psuedo elements, screen sizes (breakpoints), custom inputs, dynamic inputs, animations, grid & flex and hidden vs inline.
#webdevelopment #programming #coding #tailwindcss
🔗 Resources
TailwindCSS Vite & React Init docs - tailwindcss.com/docs/guides/vite
🔥 Get More Content - Subscribe and click le notification bell to stay tuned for all the fun & exciting tutorials to come!
📚 Chapters
00:00 Introduction
00:44 Group hover
03:47 Psuedo elements
06:41 Breakpoints
08:51 Custom inputs
10:52 Dynamic inputs
14:20 Animations
16:45 Grid vs Flex
18:19 Hidden elements
🔖 Topics Covered
- TailwindCSS
- React
- CSS styling
- Advanced TailwindCSS techniques

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

16 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@exempt5161 3 месяца назад

Instead of 'justify-center' and 'items-center' you can use `place-items-center` which combines those two classes. Same with 'w-10 h-10' you can use 'size-10' to combine them too.

@Forsvinne77 3 месяца назад

Nice, thanks

@rishavsharma765 Год назад

I recently found about the "group" class and oh man your video refreshed the concept. Now, it's printed in my brain. Loved to learn and refresh knowledge about other concepts. Thanks a lot Smol

@Smoljames Год назад

Glad you found the video helpful :) thanks for the comment

@williamhorn411 Год назад

you're actually goated for this. one of the most helpful tailwind videos out there, i'm not even kidding.

@Smoljames Год назад

Glad you found it useful my friend :)

@its.mad_mad Год назад

watching this 15 mins before an interview, its a good refresher video, thanks!

@Smoljames Год назад

Good luck with the interview! Glad you enjoyed the video :)

@sukritsaha5632 Год назад

I think it's better to use twMerge() from tailwind merge for dynamic/conditional classes instead of using template strings.

@Noam-Bahar Год назад

Breakpoint tips: in addition to the regular default breakpoints that work as a min-width, you can prefix them with max- to negate them. For example, the following two styles do the same thing: flex flex-col md:flex-row flex max-md:flex-col (flex-row is the default so no need to specify it) Arbitrary custom breakpoints: regular min-width breakpoints are written like this min-[123px]: And max width is self explanatory max:[987px]: Though sometimes it's better to add custom breakpoints to the Tailwind theme config

@hiryuimajin Год назад

I was afraid to use tailwind because I was so used to scss and now I cannot look back! This refresh video is amazing and the simple concepts of it are nice! Thank you

@genshian Год назад

Loved the format of this video! Keep these coming. You got a new subscriber!

@Smoljames Год назад

cheers bro - appreciate the support!

@Noam-Bahar Год назад

Man, I really wish that Tailwind pseudo classes and pseudo elements had an option to group all of its classes without typing the selector every time, kind of like this before:[absolute bg-green-300 w-full] Or md:[grid-cols-3 text-lg] instead of the current before:absolute before:bg-green-300 before:w-full Or md:grid-cols-3 md:text-lg Great video!!!!!

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

Its is so muxh more complex to implement, and more complex for vs code extension. Everything should be more simple not more complicated

@nmquyet Год назад

group hover blows my mind 🤯, thank you

@labnol Год назад

That's a very useful video. Thanks!

@committingchanges 11 месяцев назад

Incredible tutorial! Thank you and keep it up :)

@Smoljames 11 месяцев назад

You're very welcome!

@mauriciocamacho9099 Год назад

Awesome content! Keep it going! 🎉 By the way, which is the VS Code theme you're using?

@Smoljames Год назад

Thanks for the comment :) As for the theme, it's the freeCodeCamp theme

@starzvishnu Год назад

Really useful. Great keep going!

@mengzor Год назад

Neat, never heard of the animate functions before

@AndersFloor Год назад

Thanks, very informative

@shinmini99 Год назад

awesome video thanks a lot🔥

@ralify Год назад

Nice to know about the group stuff! What I'm missing here is the @apply, which you can use, to keep everything not inline and wrap it in a class that you can reuse

@Smoljames Год назад

It definitely is missing - so thanks for mentioning it! :)

@kiryls1207 Год назад

the creator of tailwind admitted to regret the @apply feature..saying it is the most feature breaking and difficult to debug/maintain for them. also, if you think about it, @apply kinda defies the whole purpose of inline styling of tailwind (it's almost like using plain css with class selection). but hey, maybe there are thing you can do only with @apply, i just don't know what are those cases

@ralify Год назад

@@kiryls1207 the purpose of tailwind is to write everything inline? It looks horrible that way, mostly unreadable. The reason why I want to use @apply is to replace it with normal scss later

@kiryls1207 Год назад

@@ralify i guess it depends on what makes you more productive. for instance, i don't like to switch constantly from one place to another every time i need to make some adjustment. i also like to have my style near the element it refers to, so whenever i get some design bug, i just need to find the element that's causing it, instead of playing with a centralized mega class containing all the styles of the application. there are clearly pros and cons (code looking kinda cluttered sometimes for example) the method i described was something i really enjoyed doing, where other approaches failed to me by being frustrating most of the times (i guess i'm just a noob, so don't hate me for that ahah)

@hoaxygen Год назад

@@ralify I get the sentiment but it's not that bad if you follow the recommended strategies: use the official IDE plugin to automatically sort your classes so they become predictable, break up your project into components, separate styles into variables or objects, place the styles on the elements that actually need them, and use multiple lines to for the classes. I've been using it for over a year now across various projects and it's rarely a problem.

@themarksmith Год назад

Excellent video - cheers 👍

@Smoljames Год назад

Glad you found it useful!

@Pareshbpatel 2 месяца назад

Some great advanced TailwindCSS techniques, beautifully demonstrated. Thanks. {2024--05-19} - Subscribed!

@psyferinc.3573 Год назад

thanks a bunch man

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

Bro, You are pro 🎉🎉🎉

@Murga_Mutton Год назад

thank you, very good tut

@Smoljames Год назад

Glad you found it useful :)

@Becky1498 Год назад

Love the thumb nail !

@phantazzor Год назад

best tuto in chill mode ;)

@phantazzor Год назад

what about if we want to trigger a something dynamic on hover: ....

@hanfriednguegan8321 Год назад

Omg G. Thank you so much

@jingli9232 Год назад

thx for sharing, learned a lot, a quick question, why space for dynamic inputs?

@Smoljames Год назад

Good question. It's because you're constructing a string with tailwind classes and classes must always be separated by a space otherwise they don't work

@jingli9232 Год назад

@@Smoljames got it, thx!

@sohadmad1823 10 месяцев назад

Thank you that's useful

@Smoljames 10 месяцев назад

More than welcome!

@honeymusket2614 Год назад

what mic do you use? The lighing looks firee!

@Smoljames Год назад

haha thanks - it's a FiFine apligame I think!

@golfgrab9481 Год назад

you missing something very basic. tailwind extension that suggested classname 😊

@user-oz3hc6lj2e 5 месяцев назад

before and after is not working in my tailwind can you help , bro ?

@Smoljames 5 месяцев назад

If you post your code in the discord channel I can take a look!

@enversecilmis7627 11 месяцев назад

This is tailwind basics my guy

@uzomanwanne2751 Год назад

Helpful video. However, if you can, try to improve on the video quality

@Smoljames Год назад

sure - just curious, what do you mean by improve on video quality? It's already 1080p no?

@uzomanwanne2751 Год назад

Well , Its difficult to see the screen. Do you have a GitHub repo for the code? Maybe that will help us view the code clearly

@isiahmoore6790 11 месяцев назад

Stop starin at me while I’m watching the video

@Smoljames 11 месяцев назад

But i like staring --_--

@wazirshehryarali4375 8 месяцев назад

does not using all these inline css (tailwind) makes things more complicated and difficult to maintain and read. I prefer using tailwind css and simple css both, tailwind for small things and responsiveness and plane css for complicated design and animation.

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

A totally valid way to code :) I personally find it easy to maintain as I know what I'm looking for in the styling but everyone has a preference!