05: Composing Utilities with @apply - Tailwind CSS v2.0: From Zero to Production

[@Jugement]

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

[@zihadhosan23]

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

[@tmstechsup3992]

Are you from Bangladesh?

[@zihadhosan23]

@@tmstechsup3992 Yes 🇧🇩🇧🇩

[@tmstechsup3992]

@@zihadhosan23 amgo deshe vai maximum manush bootstrap,php,angular chara ar kisui chine na 🙂 egular baireo j aro koto kisu ase,KZbin na ghatle jantam i na

[@abdullahkhalidomi3808]

​@@tmstechsup3992 jane vai jane. but tutorial banay na ei ki

[@TheXuism]

Tailwind makes Boostrap like a trap.

[@lukasluftlaufer1093]

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 :)

[@JoanSubiratsLlaveria]

Man, TailwindCSS it's amazing, but this guy speak very clear. Thank you!!!

[@ed1nh0]

As a frontend developer I've been working with CSS since earlier 2000's. Day by day Tailwind continues to surprise me with all its features!

[@dr.slowdeath1852]

Stumbled upon your video while looking for an explanation whwn and when not to use @apply. But found the @layer components feature haha thank you 🎉

[@J90JAM]

This is where having experience of modular CSS comes in handy 🙌

[@MohamIsMe]

Congrats. You created Bootstrap in Tailwind.

[@goncalodumas]

This card is familiar! Thanks for condensing Adam's (also great, but old..er) videos!

[@23pointblank]

Very cool. I am definitely switching from bootstrap to this.

[@hey_ashy]

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.

[@yestermonth]

@@hey_ashy how's it going?

[@AnatolyKosorukov]

I think all Tailwind business components related to @apply idea. This one helps develops all of that.

[@franki8469]

1:25 how do look on this css file generated from my tailwind classes?

[@smritinayak1171]

have you got the solution?

[@adisakjantrasopark7672]

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,]"

[@onthecodeagain]

I had the same issue, it was the formatter putting a space in the tailwind.css file so for example sm:text-base became sm: text-base

[@mostafahosseini2762]

Thanks to Sharing your Knowledge , That's Great !

[@craigburton4447]

How did you look at the generated css?

[@Psyzenn]

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.

[@vasiovasio]

Great video, but one suggestion - You can use CSS Nano to abstract, combine and optimize all things together, and no need to do it manually.

[@JoseGarcia-vr8mx]

This is brilliant! Thank you so much for the tutorial!

[@GharKiKheti]

Is it recommended to use @layer component @apply directive with JIT? Can we use it without making code duplication?

[@iamthekingofchoco]

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?

[@DjokovicIsOurLordAndSaviour]

Adding the class to the @tailwind components section or as a layer is having no effect for me. Anyone have any ideas?

[@arponkapuria3330]

try running the dev command if you installed using npm.

[@beqashekiladze8937]

How did you generate the 'tailwind.css demo' content? It looked like regular css.

[@jarednthomas]

Great video, thank you! 😊❤️

[@EnterOsaka]

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!

[@markryandelarmente8349]

Wow, awesome man. Thanks for this video

[@treyrader]

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?

[@Raj-jz4fc]

Explanation is awesome

[@pradeepb]

[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.

[@anandanss]

Very helpful tutorial, thank you 👍

[@abhilashoommen4704]

which ide are you using, want that preview

[@rickdev1922]

it's a sizzy browser

[@JewelIslam-d4o]

Which editor you are using/

[@Ryu-vg8td]

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

[@zorro1rr]

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!

[@vasiovasio]

Yes, I ask myself the same...

[@khalidahmada3906]

Thank you ! so powerful

[@alanballard8740]

How do you get that font for "class" in your editor?

[@SebastianPerezG]

i can't make that work, i did the same and its not working , i need some extra plugin for that ?

[@arponkapuria3330]

it worked for me when ran the dev command

[@willianarcaya]

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]

Hey, have you solved this ? I am getting The `active:bg-gray-400` class does not exist, only on the active class

[@willianarcaya]

​@@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

[@willianarcaya]

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. :(

[@BrianDanchilla]

For me it was breaking until I noticed I had a space after a pseudo element. eg hover: bg-indigo-500 to hover:bg-indigo-500 fixed the issue

[@aj4819]

@@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!

[@mattari97]

This is awesome. The only annoyance is that its not working w/ intellisense.

[@mofifunoluwake]

it's not??? Maybe that is why mine isnt working

[@mattari97]

@@mofifunoluwake no unfortunatly. If you want intellisense you should create it in the tailwind.config plugins

[@marekkarasz3776]

why this does not work with my version 3.2 ?

[@arponkapuria3330]

it worked for me when i ran the dev command

[@苑畅]

非常棒的教程

[@xames7789]

Doesnt work classes in my codes. Idnk why? Can anyone help me or anyone have problem like that?

[@xames7789]

Or should i dowload some extension?

[@Rajroyal384]

thank you so much for this

[@samduss4193]

there is a french or german accent in the background right i guess french am I right ? lol

[@MrMazvaz]

@layer is not a tailwind directive. Its css

[@TailwindLabs]

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.

[@ignaciomatiasdiaz9710]

Excelente.

[@weizhixie9678]

I am not afraid of CSS anymore. Thanks, Tailwind team.

[@lucasdallier1023]

good!!

[@Ch051]

tailwind: semantic css is bad also tailwind: @apply

[@aram5642]

Yuck

[@devKazuto]

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.

[@TheRafark]

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.

[@devKazuto]

@@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.

[@Tobias-]

@@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.

[@themodernmonk7]

Why is it not working in my version 3.1.8???

[@arponkapuria3330]

did you solve the issue ?