Top 10 Tips and Tricks with Tailwind CSS

[@developedbyed]

Let me know if you have any secret tips and tricks 👀

[@TomoDevelops]

When using Tailwind Intellisense and options don't appear like in 21:27 of the video, you can use Ctrl + Space and it'll bring up all the available suggestions.

[@fedor_U]

There is an interesting tool for debugging/changing tailwind classes as props right in the browser called Gimli Tailwind. Good for quickly debugging complex layouts, adjusting styles, etc

[@codeityt]

If you use Ayu color theme with tailwind CSS, it will make tailwind CSS to be much more powerful

[@LoStisWorld]

HiHo, i worked now also ~6 month with tailwinfd and find some cool stuff, that maybe not many people know about. 1. using own css variable colors - use rgb code like so --color: 255 255 255; in your tailwind config use myColor: 'rgb(var(--color) / )', with this its easy to use tranparent text-myColor/50 2. use theme() function in your HTML to access tailwind colors (in custom styling) - for example if you want your own shadow styling, you can do it like this... (in your HTML element) => shadow-[-0.75rem_-0.75rem_0_theme(colors.red.500/25%)] 3. use [&>*] in the parent component to style the children - example in you element use [&>li]:py-4 an all your elements will get the py-4

[@tippififestarr6519]

Checking out the newest developedbyed videos and picking out a few magically salient ones right before starting a new project

[@RishiKasyap]

Good intro to tailwindcss. here are few tips I would suggest 1. color opacity - add "/opacityValue" eg: bg-black/40, for opacity to work for CSS variable colors they need to be In rgba format. 2. container for responsive design, use tailwind.config > container to set center-true and padding defaults for all sizes 3. classnames, clsx libs to add dynamic classes 4. class-variance-authority lib to build components (for classnames, clsx, and cva add regex in vscode settings tailwindcss intellisense )

[@tsarprince]

object-cover mix-blend-mode backdrop-blur are just the most magical one liners ig

[@kilo.ironblossom]

What does it make ? Is it for images ? I'm new to tailwind that's why I ask

[@martinlednar4009]

Hi DevEd 😉thank you for your videos I really love them. Just 2 suggestions that might be helpful: 1. Tailwind Intellisense: If you want to get suggestions quicker and without always hitting the backspace or space edit this setting in VSCode => Editor: Quick Suggestions. You should see a table and in it 3 items. Modify the value for string and set it to true. 2. If you want to change the opacity of color just add /number as % after your color, like this text-red-500/50 which will set the opacity of the color to 50%. Hope it helps, have a nice weekend everyone and thank you again Ed for your amazing videos 😇

[@jeffwilliams1645]

I was just about to leave a comment about the opacity trick, but then saw that it was brought up here... 💯

[@piotrrodzen772]

Thank you about the quick suggestions, this was driving me how I had to go back and press space before it would suggest me styles

[@lko_]

If you want to style the children of a parent you can use [&>*]:bg-red-500 and it'll set a red background to all the children, and you can even use it like every css selector [&>div>ul]

[@shareefhassan8197]

in unocss there is a shorthand for that "children:bg-red-500" i believe tailwind has a plugin for that too

[@modernkennnern]

@@shareefhassan8197 you can easily create your own selector like those with

[@JEsterCW]

@@modernkennnern its not even 3 xd its one liner

[@modernkennnern]

@@JEsterCW don't you have to add a "createVariant()"( or whatever) closure function inside of a variants section inside of which you have to define it? It's a fair bit of boilerplate, but after you've created the boilerplate it is indeed a single line

[@sandrinjoy]

for opacity, there is a good shorthand. text-gray-600/60, bg-gray-600/20, and so on. /20 is will give 20% opacity .

[@developedbyed]

that's a good tip!

[@elhaambasheerch7058]

Every tailwind beginner should watch this, helps massively !!

[@lucaslunzmann6115]

Thank you for these videos! I love when they include both React and Tailwind. I've gotten so much value out of your channel. Thanks so much :)

[@lukas.webdev]

I just posted a video / tutorial on React + Tailwind CSS in 2023 - maybe this is also interesting for you ... 😉

[@alice-smith]

In VS Code you can press Ctrl+ (by default) to get the autocomplete inside the class prop :^)

[@JeffBarron1]

just learning this stuff, but I think for variable fonts you dont need to declare weights font weights (19:55) and you can also declare subsets with fontLoaders in next.config. so all you need is the variable ??

[@princeahmad]

Thanks @develpedbyed for this short and educative video, I'll add a tip I learned recently about visibility effect on hover, add group to the classname of the parent element, while set display to none using hidden in tailwind on the child element, also add group-hover:block to the child element, it worked like magic for me.

[@benmana7901]

Tailwind is super nice. Had the opportunity to work with in the last company and now I use it for my own projects. Recommend 10/10 👌🏻

[@CaliburPANDAs]

Would always suggest the prettier plugin to format your code for Tailwind. Very helpful when editing or maintaining your styles. 🐼

[@lukas.webdev]

Yes, 100% 😉

[@shamiul_islam]

Good one! One suggestion though- you don't need to delete and retype the text again and again to see the auto suggestion. Press CTRL + Spacebar if don't see any auto suggestion.

[@junsgk]

9:34 you can also do "bg-black/70"

[@krismatic_]

I also will not be going back to anything else after trying Tailwind even after just a week. I'm glad you agree. My favorite custom classes have been: .MARK { @apply Hover border-4 rounded-2xl border-purple-500 } .BoxFull { @apply w-full h-full } .BoxScreen { @apply w-screen h-screen } .FlexCenter { @apply flex items-center justify-center } .FlexCenterCol { @apply flex flex-col items-center justify-center }

[@tippififestarr6519]

at 16:09 I think it's a typo? lg:max-2 maybe should be lg:max-w

[@jjnimes]

Cool and informative content. The way you talk is light and chill. Thanks for this!

[@russaz09]

The tip of start for mobile and work upwards makes the workflow make a lot more sense for me. Great video, love the educational content :)

[@babakfp]

1:48 Here you can see it stops suggesting you the class names... whenever that happens, press `ctrl` + `space` to fix it.

[@martiananomaly]

cool beans

[@quickcodingtuts]

I never understood the reasoning behind using apply. I mean why not just use plain CSS instead? Glad you also said to avoid it here because I was doing it anyway.

[@lukas.webdev]

one main reason for using the @apply directive is because you have to write less code... 😉

[@dazecm]

Tailwind noob here. HTML heading tags are unstyled by default which is why all of them are the same size as a p tag yes? I want to apply a default serif font family and various font sizes for each heading and my understanding is to use the @layer base directive and then use @apply font-serif as well as the Tailwind text- class to apply different sizes such as text-lg, text-base, text-2xl etc for each heading. Is this an okay use of @apply to create a default type scale for a website?

[@dazecm]

Or maybe I should be using the TailwindCSS Typography plugin? Thanks for any advice on this.

[@lukas.webdev]

Correct. If you want to style your headlines you can use @layer base and the inside there you can style your headlines with using the @apply directive... If you want to watch another video on Tailwind: I just posted a new Tailwind CSS Tutorial (2023) - maybe this is also helpful ... 😉

[@ericxls93]

So good you are doing full stack going forwards! Snapshots of “steps” makes learning twice as hard!

[@Melcarthus]

Tailwind is so awesome. I have started using it recently and have build(marked up) two websites and they where done much quicker!

[@Penbyte]

Which vs code theme are you using?

[@coderjacko8142]

I was literally figuring out some things with Tailwind and boom, your video pops up haha... Thanks for the tips Ed :)

[@maxmaximus7773]

Good video. What theme are you using on vscode?

[@ICOReviewtoken]

Hi bro. I have a custom font that I want to import locally but it doesn't accept it. Also if I want to give users the ability to choose their own fonts when using, for example users will set the font for different title tags and font base, can I do it in nextjs 13? Please give me solution. I use nextjs 13, taiwincss. Thank you

[@nikilk]

Hi @developedbyed how would you know if a tail wind class is custom or if it exists especially when your starting out ? Does VS Code indicate the source of the class somehow ?

[@non-stereotypicalprogramme3666]

To all of you who are looking for this theme. It seems to me like it's "Community Material Theme Ocean High Contrast" from "Community Material Theme" extension

[@quask]

What theme are you using its looks very nice

[@fedor_U]

What font you using for VS Code in this video?

[@ahmedessam440]

hello ed, if i may ask is there any way to write tailwind classes under each other not next to each other

[@fetyagency9808]

this youtuber is the best

[@FalconCodes-dx2nj]

What's the benefit of using css variables in the tailwind config instead of just pasting the hex value, can someone please explain

[@CanRau]

Using space-y and space-x all the time, love them 🥰

[@jekapan481]

Who knows why in my vscode in html file doesnt appear colorpicker in front of colored style like "bg-red". But in css file it appears

[@m12652]

Great stuff! How about a video on container queries in Tailwind, in the context of redefining a grid layout…. Please 👍

[@benacker8525]

I have a tip for everyone I remembered Ed complaining about this thing I found out this setting recently in your `user-settings(JSON)` in vscode add ""files exclude" : {node_modules/: true, "someotherthing":true} you will never have to see those node_modules again or click on it by accident!

[@linusschulze5261]

Hey Ed, thank you for your videos! It would be amazing if one of you future videos would cover how to upload images with prisma to an db(e.g. postgres) and then how to fetch that image on the client side and actually display it!

[@davidmutua6971]

images are never stored in a database but their paths as strings e.g. Actual image living in AWS S3 or Cloudinary. but the url is stored via Prisma ORM into a PostgreSQL Database

[@naranyala_dev]

thank you, we need more tailwind examples

[@lukas.webdev]

I am currently working on a video about tailwind and I am probably going to post it this Friday... if you are interested in learning more about TailwindCSS 😉

[@onwardsdew]

Great video and awesome vscode color theme. What theme do you use? Can I copy your theme and vscode settings? =)

[@live_emulator]

i find using the @apply for reusable components in React. That's the only it makes sense to me to use that.

[@ibrahimhc19]

I'm a beginner. Should I learn bootstrap or tailwind? Or both?

[@gustavoshigueo]

You should start with plain CSS to learn the fundamentals of sstyling (box-model, cascading and inheritance), then, once you are confortable with that, tailwind is probably the better option. Good luck :D

[@ibrahimhc19]

@@gustavoshigueo I already learned HTML and CSS, a little bit of JS. I just wanted to know which css framework to choose, thank you for your answer, tailwind it is then.

[@martiananomaly]

Definitely not bootstrap. It's garbage and websites made in bootstrap look all the same.

[@lukas.webdev]

@@ibrahimhc19 Yeah, definitely go with Tailwind 😉 BTW: I am currently working on a video about tailwind and I am probably going to post it this Friday... if you are interested in learning more about TailwindCSS.

[@guilhermegirardi]

Beautiful!

[@codeAlongwith]

How can I run an onclick event handler to show hidden content?

[@Melcarthus]

Yes, tailwind really teaches you the inheritance of CSS that it was suppose to be used as.

[@themarksmith]

Useful stuff!!

[@amg4160]

great video ed!

[@AndrewErwin73]

so, you explained that even when using classes (which is all tailwind actually is) the C in CSS still stands for "CASCADING"... hard to believe that people didn't get that...

[@phantazzor]

what about visible/hidden with breakpoints

[@abdulaziztoshpolatov757]

Your vwcode theme ?

[@lihou12]

Please make 1 website react js with tailwind css

[@erichardca]

whats the best way to learn tailwind for beginners

[@lukas.webdev]

I am currently working on a video about tailwind and I am probably going to post it this Friday... if you are interested in learning about TailwindCSS as a beginner than imo this is the best way 😉

[@lukas.webdev]

By the way: I already posted the video I was talking about... So if you are interested in an Tailwind CSS Tutorial for Beginners in 2023 - then this should be exactly what you are looking for 😉

[@jacobhilker7722]

I'd say just play around with tailwind play

[@outpost31737]

Tailwind takes some learning and adding custom CSS can be a pain but overall I like it and to hell with the purists :)

[@learner8084]

I wonder. Does it mean that I don't use CSS Selectors in Tailwind at all ?

[@rockNbrain]

Tks bro Nice job

[@DeepakisDemigod]

Seems like 2023 is way faster than 2021 & 2022 😌

[@thezeeshann]

Hi ED Big fan bro

[@streamxprimium3103]

Sir, I am facing a issue with my navigation bar in Mobile View In Mobile View it Changes to Hamburger Menu ""But when user Open webpage The Menu also Opens"" I don't want user to see an Opened Menu and I am unable to find any solution that how to do so .. Please Help me if u can

[@nested9301]

Iwas just wondering if tailwind worth it and i got the answer thank u

[@fallen_turbo]

First like and comment, I loved your youtube tutorial on Nextjs 13.1

[@developedbyed]

Awesome, thank you!

[@mrcrypticx1]

Styling Tip: Always style for mobile users first

[@lukas.webdev]

100% 😉

[@WhhhhhhjuuuuuH]

"Best practices” don’t actually work. I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way." Adam Wathan Creator of Tailwind CSS

[@ilenabrody3470]

Those aren’t tips and tricks but just the basics of tailwind.

[@nanayaw7159]

Splendid

[@slavenDj]

Use ctrl space to show suggestions that's more vscode tip 😅

[@martinvega1452]

great i'm new subscriber

[@kevinwg02]

could we just stop with react? what's wrong with simple html....

[@soymidasyt]

the thing of putting the name of the class in the css file is like don't having tailwind why would you do that? it's stupid it's like having a spoon and using it from the bottom instead of the top it's useless. Better doing components if you repeat your code

[@vickyarul989]

🔥🔥

[@robertkaminski1781]

"Problem with long names nad names collision"... "if your project groves..." man, .... do you hear about CSS Modules ? ..., or eg. scoped styles in vue.

[@stripedgoat]

Let me ask you something. Let’s say you have a card which is being used on multiple instances throughout the entire website. You styled them with your little Tailwind utility classes… box-shadow was one of them…. Imagine your client asking you to slightly lower the box-shadow to be less intense. To my best knowledge, you’d have to go on every single card one by one, replacing your utility class. While when using custom classes for everything you do, all you’d have to do is go to your .my-card custom class, and alter the box-shadow property. Done deal. It’s much cleaner, it’s best practice.

[@WhhhhhhjuuuuuH]

Maybe you should update your knowledge & go look it up in the tailwind docs under reusing-styles before you write a comment. "Best practices” don’t actually work. I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way." Adam Wathan Creator of Tailwind CSS

[@martiananomaly]

Well, in React, you would be using components for the cards so there's that problem solved. In plain HTML and CSS, just use @apply if it's really needed. Worst case scenario, use find and replace in the text editor lol though it's a horrible practice.

[@stripedgoat]

@@WhhhhhhjuuuuuH for the class naming “problem”: BEM.

[@AbhishekSingh-bt6uo]

hey dev please make a video on redux

[@CanRau]

Also according to tw team apply if their biggest regret and Asistente hard to maintain 😬

[@CodeTatami]

I think I heard you once that tailwindcss is crap. sorry if i was wrong

[@rafinha-1112]

Isn't apply not recommended?

[@john-ly4ix]

Man you're great but better go for a Hollywood movie , all this work is a waste of your life imo. You deserve more than this

[@languagelearningexperience6814]

yea you can never really say "looks disabled" and it sound right.

[@bitehunter122]

No. You’re more gorgeous 😜😍😘

[@Dev_Everything]

Do NOT cuss the Lord. No need for that.

[@chhavimanichoubey9437]

u deserve views but u don't get it whyyyy? Maybe u don't care about this stuff anymore and just want to create excellent assthetic context for web devs.

[@bishalkar5614]

Tip : Tip No. 1 is not a Tip. It's ba sic CSS trick. Nothing to do with Tailwindcss

[@frfrongong9712]

Fortnite 🙌

[@valeraoficial]

*t

[@namaefumei]

Lol these are css tips

[@ezxcel]

first view

[@lovro5110]

Here's a tip: 1) Never Use Tailwind, specially for big projects because your HTML will look awful with million of classes...

[@developedbyed]

Things i said before trying Tailwind

[@martiananomaly]

Use inline-fold extension to solve this

[@Pareshbpatel]

Nice Tailwind tips. Thanks, Ed. {2024-05-18}

[@karthikeyan-lv6wu]