Dude, this is so sick !!! When i first heard about Tailwind, i was kinda skeptical about the class stacking which would result from a functionality oriented framework, but this removes nearly every issue regarding this topic !! Mad respects, i'm genuinely super hyped to start using Tailwind
while you talk, I can see you're smiling very lightly. smile of haven. I really like how you're teaching us with pleasure. I appreciate how you describe everything as like easy as bite a cake. Thank you!! I'm switching BootStrap to Tailwain. :D
@@zihadhosan23 amgo deshe vai maximum manush bootstrap,php,angular chara ar kisui chine na 🙂 egular baireo j aro koto kisu ase,RU-vid na ghatle jantam i na
Watching from video 1 I was like "meh, why learn a new thing, when I have scss?", but slowly I am getting a fan of tailwind, also thanks to these beautiful tutorials here. Thanks as lot :)
Same. I switched from Bootstrap to Tailwind for my project I started a few days ago. I personally feel it's so much better as it has more granular control over the ui.
Thank you for these clips but I need help to fix this " @layer " [vite] Internal server error: Expected a pseudo-class or pseudo-element. and " Unknown at rule @tailwind css (unknownAtRules) [1, 2, 3,]"
The easiest fix in the universe. When you hover over btn or btn-primary to show pop-up with the info tho that require some extension to check your tailwind and display.
Hello j'ai remarqué ton accent francais, j'ai un petit soucis avec @apply il ne récupère pas mes nouvelles classes vous avez une idée pour cela fonctionne je trouve aucun élément de réponse
that's one way to do it! cool tutorial. I guess if you were writing in react, you'd just make a button component and dump all the classes in there, yea?
first, I select the text using multicursor. Then, use CMD+X to cut. But when I paste it back to the btn class, it pastes the text twice..! It is supposed to paste only once?
You're copying and pasting and moving code like a pro in VSC, how do you do it. I have no idea and am not a power user yet :) I have really enjoyed following along with these videos!
Why did he put the shadow-lg hover:-translate-y-0.5 transform inline in the html instead of in the tailwind.css btn-primary apply? Just to show how both ways are done? In my mind if we are going to decide to using the apply feature it might be best to put all of the unique styles there. Thanks for the videos!
Great tool!! but I have issues moving btn classes to @apply or @layer. Console says [vite] Internal server error: Expected a pseudo-class or pseudo-element. Plugin: vite:css
@@omurchu Hi There! I did some tests and found that some classes are generating errors after moving it to the tailwind.css file. After removed those classes the code works fine. Also, I've tried on another projects with different classes and everything goes well. Removing class by class on my code with errors I found that hover could be the cause of my error. Using just inline Tailwind styles everything run smoothly
Edit: After trying with a few different methods I always got the same result. Error: Expected a pseudo-class or pseudo-element. on @apply I Cant use pseudo elements such as Hover. :(
@@willianarcaya I just looked at the source code in github from the link below the video and grabbed all the classes from there, copied them into my css file and it worked. I must have typed something incorrectly somewhere. EDIT: Actually that didn't do it, but going into VS Code settings and unticking css:validate seemed to do the trick!
We actually added `@layer` as a preprocessor function before it was a thing in CSS, so it behaves differently in Tailwind than natively. There are no `@layer` rules in the final output.
It's just ugly having dozens and dozens of classes in HTML and violates "Separation of concerns". CSS is where the style resides, not HTML. Otherwise, you could just as well write inline styles directly in HTML. Usually, you have a style guide for projects anyway, so there shouldn't be a need to know what a class applies but only which classes to use.
The styles are still in a separate CSS file... I found the code actually beautiful. In the last lesson, when he added position absolute to the image but had to add position relative to the parent div, it was extremely readable. You could see the word relative in one line and then the word absolute right in the next line. This relationship in a CSS file is a nightmare (making sure the parent has a relative position when needed. You seem to be very closed minded.
@@TheRafark I'm far from closed-minded. But I use languages and tools as they're intended to and not how I want them to function. That's why I dislike the JSX. HTML in PHP has been taboo, "smelly code" or bad practice for a long time and that's why Blade and Twig came to life, yet writing HTML in JS seems to be acceptable, even though it's no different from HTML in PHP. No, it's not acceptable. It's ugly and is completely against "Separation of concerns". Now add "utility-first" styling to it. It becomes a complete and utter mess. Hard to read and even harder to maintain. It's fairly simple: HTML is for layout, CSS is for style and JS for functionality. You don't merge these into one large blob. "making sure the parent has a relative position when needed" that's part of the job. If that's a problem for you, you seem to be very lazy, to use your own words.
@@devKazuto I think there's an audience for everything. This clearly is not for you. I'm trying to figure out if I like this. At the moment I see having this apply function as a fix for a non existing problem. When just writing in css in the first place I mean ;-) We're back at square one.
[plugin:vite:css] C:/Users/HP/Desktop/tailwind/css/tailwind.css?direct:18:205: The `active:bg-indigo-600` class does not exist, but `hover:bg-indigo-600` does. If you're sure that `active:bg-indigo-600` exists, make sure that any `@import` statements are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
