at 3:46 you edit the config file for the active state of the button. Was this exclusive to previous versions of Tailwind ? I dont see this mentioned in the current version of the docs.
Yep, all variants have gone away since the Just-in-Time compiler was added in Tailwind v3. Every variant is enabled out of the box now, so you don't need to worry about that.
And yet I see that the main problem with Tailwind CSS is that we put all the CSS / SCSS into classes and make it too long... and it is very difficult to read and maintain without some additional tools, sorry, but I still don't use Tailwind CSS in my project. Thank you for helping me make a decision! :) Maybe someday, for some type of project, I will choose Tailwind, but still not today.
I'm trying to implement focus-visible on input fields but it still shows focus when user clicks in. focus-visible:outline-none works for buttons and links but not for input fields. Can anyone help how I can remove the focus from input field please?
Thanks for the video. I would like to know how can I tell vscode to wrap class attribute when there are too many classes? Right now all the class names stay on one single line no matter how long it gets.
Thank for the video , but there is a problem with *transform hover:-translate-y-0.5* on a link tag , it doesn't work , but on button tag it work, can you explain it to me? Thanks
If you go the normal way, it takes time to read all of them but you move all those classes under a common class, say .button, suddenly there's a clean up.
Having to enable things in the config file seems really clunky and inelegant. There has to be a better reason than "this stuff is uncommon so we didn't enable it by default".
I'm just concerned with the amount of disorganized garbage in the class attributes. I hope there is a way to tidy this up because it's not maintainable......
Of course there's a way, move those classes under a common class. Say you have 10 classes for a button, create a tailwind component, say button, and grab all those classes under the class .button.
A condition to check that is work or not: change your screen size to 640px or wider then hover the button. I had done than and the button has change its background color to green.
i think this series one of the best explanation/course i have ever watch
Best Series to Learn CSS, TailwindCSS, overall responsive design.
Tailwind is the best thing I discovered after Django. I'm now using them both in my projects.
Thanks for explaining this "extend" fields behaviour of the config file!
Oops...! 4:19
Very clear and thorough tutorials! Merci beaucoup!
Yes! This is an excellent methodological technique - problem-based learning.
Great set of videos, thanks for all this good work!
That button is so beautiful!!!
your explanation is very clear sir very easy to understand too thank you very much
Love to hear that, happy it was helpful ✨
at 3:46 you edit the config file for the active state of the button. Was this exclusive to previous versions of Tailwind ? I dont see this mentioned in the current version of the docs.
Yep, all variants have gone away since the Just-in-Time compiler was added in Tailwind v3. Every variant is enabled out of the box now, so you don't need to worry about that.
And yet I see that the main problem with Tailwind CSS is that we put all the CSS / SCSS into classes and make it too long... and it is very difficult to read and maintain without some additional tools, sorry, but I still don't use Tailwind CSS in my project.
Thank you for helping me make a decision! :) Maybe someday, for some type of project, I will choose Tailwind, but still not today.
I'm trying to implement focus-visible on input fields but it still shows focus when user clicks in. focus-visible:outline-none works for buttons and links but not for input fields. Can anyone help how I can remove the focus from input field please?
For me the effects work without including the transform class
Thanks to Sharing your Knowledge , That's Great !
This tutorial is opening wide my mind hehehe, thanks a lot!!!
I love it!
But I will work on prev video first: go to say, *responsive design* is the most important thing in current gen frontend dev
Is the default browser focus state on the new version outline-none?
Any tutorial or material on the invalid state because I don't know how to use it?
Thanks for the video. I would like to know how can I tell vscode to wrap class attribute when there are too many classes? Right now all the class names stay on one single line no matter how long it gets.
You can go to View in your vs code and activate the toggle word wrap. (or press Alt+Z in your vs code)
install prettier extension then press left (shift+alt+F)
It seems variants has been deprecated on new version.
I agree with you.
amazing video , thanks .
Is variant configuration still necessary with Tailwind v3.0?
Nope. Tailwind 3 includes everything by default because it only compiles what you use.
Thank for the video , but there is a problem with *transform hover:-translate-y-0.5* on a link tag , it doesn't work , but on button tag it work, can you explain it to me? Thanks
Must include type="button"
Thanks you
I know this is an old comment, but make sure to set your href to inline-block.
That long class is hard when debugging style. Am I right?
If you go the normal way, it takes time to read all of them but you move all those classes under a common class, say .button, suddenly there's a clean up.
Je ne savais pas que Rémi Gaillard travaillait pour Tailwind 😄
watcha talking bout?
active: state still doesn't work for me.
merci very good explanations
Having to enable things in the config file seems really clunky and inelegant. There has to be a better reason than "this stuff is uncommon so we didn't enable it by default".
I'm just concerned with the amount of disorganized garbage in the class attributes. I hope there is a way to tidy this up because it's not maintainable......
Of course there's a way, move those classes under a common class. Say you have 10 classes for a button, create a tailwind component, say button, and grab all those classes under the class .button.
Create a tool/library. Also casually create a whole course for it for free. Cheers
sm:hover:bg-green-500 not work!
A condition to check that is work or not: change your screen size to 640px or wider then hover the button. I had done than and the button has change its background color to green.
👏🏽👏🏽👍🏽