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

  Рет қаралды 47,490

Smoljames

Smoljames

Күн бұрын

Пікірлер
@exempt5161
@exempt5161 8 ай бұрын
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
@Forsvinne77 8 ай бұрын
Nice, thanks
@ryancaltabiano2892
@ryancaltabiano2892 4 ай бұрын
Honestly I learn more from comments then these videos. Thanks for sharing those
@SergeyNeskhodovskiy
@SergeyNeskhodovskiy 4 ай бұрын
Thanks, new to me too
@rishavsharma765
@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
@Smoljames Жыл бұрын
Glad you found the video helpful :) thanks for the comment
@its.mad_mad
@its.mad_mad Жыл бұрын
watching this 15 mins before an interview, its a good refresher video, thanks!
@Smoljames
@Smoljames Жыл бұрын
Good luck with the interview! Glad you enjoyed the video :)
@williamhorn411
@williamhorn411 2 жыл бұрын
you're actually goated for this. one of the most helpful tailwind videos out there, i'm not even kidding.
@Smoljames
@Smoljames 2 жыл бұрын
Glad you found it useful my friend :)
@Noam-Bahar
@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
@sukritsaha5632
@sukritsaha5632 Жыл бұрын
I think it's better to use twMerge() from tailwind merge for dynamic/conditional classes instead of using template strings.
@hiryuimajin
@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
@shahzaibkhan5423
@shahzaibkhan5423 5 ай бұрын
Awesome ! Sir, you just cleared our doubts. Thank you very much sir 🎉
@nmquyet
@nmquyet Жыл бұрын
group hover blows my mind 🤯, thank you
@genshian
@genshian Жыл бұрын
Loved the format of this video! Keep these coming. You got a new subscriber!
@Smoljames
@Smoljames Жыл бұрын
cheers bro - appreciate the support!
@Noam-Bahar
@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
@tuananhdo1870 Жыл бұрын
Its is so muxh more complex to implement, and more complex for vs code extension. Everything should be more simple not more complicated
@ralify
@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
@Smoljames Жыл бұрын
It definitely is missing - so thanks for mentioning it! :)
@kiryls1207
@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
@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
@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
@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.
@committingchanges
@committingchanges Жыл бұрын
Incredible tutorial! Thank you and keep it up :)
@Smoljames
@Smoljames Жыл бұрын
You're very welcome!
@SergeyNeskhodovskiy
@SergeyNeskhodovskiy 4 ай бұрын
You can create a loader with much less code, just border-transparent, back with border-top, border-left, rounded 50% and animate:spin. And it will be transparent in the middle too.
@Pareshbpatel
@Pareshbpatel 7 ай бұрын
Some great advanced TailwindCSS techniques, beautifully demonstrated. Thanks. {2024--05-19} - Subscribed!
@phantazzor
@phantazzor Жыл бұрын
best tuto in chill mode ;)
@phantazzor
@phantazzor Жыл бұрын
what about if we want to trigger a something dynamic on hover: ....
@nishargakabir745
@nishargakabir745 Жыл бұрын
Bro, You are pro 🎉🎉🎉
@honey_musket
@honey_musket Жыл бұрын
what mic do you use? The lighing looks firee!
@Smoljames
@Smoljames Жыл бұрын
haha thanks - it's a FiFine apligame I think!
@themarksmith
@themarksmith Жыл бұрын
Excellent video - cheers 👍
@Smoljames
@Smoljames Жыл бұрын
Glad you found it useful!
@jingli9232
@jingli9232 2 жыл бұрын
thx for sharing, learned a lot, a quick question, why space for dynamic inputs?
@Smoljames
@Smoljames 2 жыл бұрын
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
@jingli9232 2 жыл бұрын
@@Smoljames got it, thx!
@mengzor
@mengzor Жыл бұрын
Neat, never heard of the animate functions before
@mauriciocamacho9099
@mauriciocamacho9099 Жыл бұрын
Awesome content! Keep it going! 🎉 By the way, which is the VS Code theme you're using?
@Smoljames
@Smoljames Жыл бұрын
Thanks for the comment :) As for the theme, it's the freeCodeCamp theme
@labnol
@labnol 2 жыл бұрын
That's a very useful video. Thanks!
@shinmini99
@shinmini99 Жыл бұрын
awesome video thanks a lot🔥
@starzvishnu
@starzvishnu 2 жыл бұрын
Really useful. Great keep going!
@Becksbradley
@Becksbradley 2 жыл бұрын
Love the thumb nail !
@user-oz3hc6lj2e
@user-oz3hc6lj2e 10 ай бұрын
before and after is not working in my tailwind can you help , bro ?
@Smoljames
@Smoljames 10 ай бұрын
If you post your code in the discord channel I can take a look!
@AndersFloor
@AndersFloor Жыл бұрын
Thanks, very informative
@hanfriednguegan8321
@hanfriednguegan8321 Жыл бұрын
Omg G. Thank you so much
@Murga_Mutton
@Murga_Mutton Жыл бұрын
thank you, very good tut
@Smoljames
@Smoljames Жыл бұрын
Glad you found it useful :)
@psyferinc.3573
@psyferinc.3573 Жыл бұрын
thanks a bunch man
@golfgrab9481
@golfgrab9481 Жыл бұрын
you missing something very basic. tailwind extension that suggested classname 😊
@sohadmad1823
@sohadmad1823 Жыл бұрын
Thank you that's useful
@Smoljames
@Smoljames Жыл бұрын
More than welcome!
@enversecilmis7627
@enversecilmis7627 Жыл бұрын
This is tailwind basics my guy
@isiahmoore6790
@isiahmoore6790 Жыл бұрын
Stop starin at me while I’m watching the video
@Smoljames
@Smoljames Жыл бұрын
But i like staring --_--
@uzomanwanne2751
@uzomanwanne2751 Жыл бұрын
Helpful video. However, if you can, try to improve on the video quality
@Smoljames
@Smoljames Жыл бұрын
sure - just curious, what do you mean by improve on video quality? It's already 1080p no?
@uzomanwanne2751
@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
@wazirshehryarali4375
@wazirshehryarali4375 Жыл бұрын
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
@Smoljames Жыл бұрын
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!
@IIlIlIIIllII
@IIlIlIIIllII Жыл бұрын
Why is it called advances techniques and then you proceed to show basic skills that you learn in every 20 minutes guide
@khalilbaba7991
@khalilbaba7991 3 ай бұрын
That's front end Devs for you my guy
@chirkov
@chirkov Жыл бұрын
It's not advanced techniques, just basic classes usage
@VelvetSage
@VelvetSage Жыл бұрын
ikr and all these comments about this being useful... just read the docs bro wtf
@SaqibNaeem-c6q
@SaqibNaeem-c6q Жыл бұрын
who use h1 in the button man
@Smoljames
@Smoljames Жыл бұрын
fair haha
@_tanzil_
@_tanzil_ 3 ай бұрын
This not a advance tutorial. All techniques are just basic.
Top 10 Tips and Tricks with Tailwind CSS
23:45
developedbyed
Рет қаралды 91 М.
10 Tailwind Tricks You NEED To Know!
10:45
Ravi - Perfect Base
Рет қаралды 312 М.
Support each other🤝
00:31
ISSEI / いっせい
Рет қаралды 81 МЛН
Сестра обхитрила!
00:17
Victoria Portfolio
Рет қаралды 958 М.
Мясо вегана? 🧐 @Whatthefshow
01:01
История одного вокалиста
Рет қаралды 7 МЛН
Learn TailwindCSS in 23 minutes
23:29
Smoljames
Рет қаралды 18 М.
6 Advanced Flexbox Features You Probably Don’t Know
14:54
Web Dev Simplified
Рет қаралды 119 М.
Tailwind CSS Animations That Will BLOW Your Mind!
10:24
CODELOPER
Рет қаралды 2,3 М.
Translating a Custom Design System to Tailwind CSS
10:10
Tailwind Labs
Рет қаралды 126 М.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Web Dev Simplified
Рет қаралды 199 М.
5 MORE TailwindCSS Tips I Wish I Learned Earlier
5:32
Tom Is Loading
Рет қаралды 14 М.
How the PROS Use Tailwind
9:55
Frontend FYI – by Jeroen
Рет қаралды 57 М.
Is Tailwind Taking Over CSS? (and some other insights)
18:25
Kevin Powell
Рет қаралды 59 М.
Styling Forms with Tailwind CSS
17:25
Tailwind Labs
Рет қаралды 143 М.
Support each other🤝
00:31
ISSEI / いっせい
Рет қаралды 81 МЛН