Top 10 Tips and Tricks with Tailwind CSS
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- Check out my web development courses 🚀
developedbyed.com
Are you struggling with writing clean and efficient Tailwind CSS code? Look no further! In this video, we share our top tips and tricks for writing better Tailwind CSS. From delegating classes to parent elements to using accurate transition classes, we'll show you how to make your code look and perform better. We'll also explain why splitting CSS class names onto multiple lines and avoiding creating components in CSS files can make your code easier to read and maintain. Whether you're a beginner or an experienced user, these tips will help you take your Tailwind CSS skills to the next level.
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming #react - วิทยาศาสตร์และเทคโนโลยี
Let me know if you have any secret tips and tricks 👀
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.
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
If you use Ayu color theme with tailwind CSS, it will make tailwind CSS to be much more powerful
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
Checking out the newest developedbyed videos and picking out a few magically salient ones right before starting a new project
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 )
object-cover mix-blend-mode backdrop-blur are just the most magical one liners ig
What does it make ? Is it for images ? I'm new to tailwind that's why I ask
for opacity, there is a good shorthand.
text-gray-600/60, bg-gray-600/20, and so on. /20 is will give 20% opacity .
that's a good tip!
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
😇
I was just about to leave a comment about the opacity trick, but then saw that it was brought up here... 💯
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
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]
in unocss there is a shorthand for that "children:bg-red-500" i believe tailwind has a plugin for that too
@@shareefhassan8197 you can easily create your own selector like those with
@@modernkennnern its not even 3 xd its one liner
@@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
You may not see this, but I’m a college student, and this has to be the most valuable TH-cam channel ever come across. I have followed so many of your tutorials. It’s crazy! Thank you so much for putting out such high-quality content and exposing me to so many technologies.
In VS Code you can press Ctrl+ (by default) to get the autocomplete inside the class prop :^)
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.
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 :)
I just posted a video / tutorial on React + Tailwind CSS in 2023 - maybe this is also interesting for you ... 😉
Cool and informative content. The way you talk is light and chill. Thanks for this!
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 :)
Every tailwind beginner should watch this, helps massively !!
So good you are doing full stack going forwards! Snapshots of “steps” makes learning twice as hard!
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 👌🏻
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.
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
}
Tailwind is so awesome. I have started using it recently and have build(marked up) two websites and they where done much quicker!
I was literally figuring out some things with Tailwind and boom, your video pops up haha... Thanks for the tips Ed :)
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 ?
Using space-y and space-x all the time, love them 🥰
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 ??
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!
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
9:34 you can also do "bg-black/70"
Great stuff! How about a video on container queries in Tailwind, in the context of redefining a grid layout…. Please 👍
hello ed, if i may ask
is there any way to write tailwind classes under each other not next to each other
Would always suggest the prettier plugin to format your code for Tailwind. Very helpful when editing or maintaining your styles. 🐼
Yes, 100% 😉
great video ed!
Useful stuff!!
Good video. What theme are you using on vscode?
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
What font you using for VS Code in this video?
Tks bro Nice job
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
thank you, we need more tailwind examples
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 😉
Which vs code theme are you using?
Beautiful!
What theme are you using its looks very nice
at 16:09 I think it's a typo? lg:max-2 maybe should be lg:max-w
Great video and awesome vscode color theme. What theme do you use? Can I copy your theme and vscode settings? =)
i find using the @apply for reusable components in React. That's the only it makes sense to me to use that.
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!
this youtuber is the best
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...
What's the benefit of using css variables in the tailwind config instead of just pasting the hex value, can someone please explain
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
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?
Or maybe I should be using the TailwindCSS Typography plugin? Thanks for any advice on this.
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 ... 😉
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.
one main reason for using the @apply directive is because you have to write less code... 😉
Iwas just wondering if tailwind worth it and i got the answer thank u
Splendid
Yes, tailwind really teaches you the inheritance of CSS that it was suppose to be used as.
1:48 Here you can see it stops suggesting you the class names... whenever that happens, press `ctrl` + `space` to fix it.
cool beans
Hi ED
Big fan bro
How can I run an onclick event handler to show hidden content?
Seems like 2023 is way faster than 2021 & 2022 😌
what about visible/hidden with breakpoints
great i'm new subscriber
Tailwind takes some learning and adding custom CSS can be a pain but overall I like it and to hell with the purists :)
Use ctrl space to show suggestions that's more vscode tip 😅
🔥🔥
I wonder. Does it mean that I don't use CSS Selectors in Tailwind at all ?
Your vwcode theme ?
I'm a beginner. Should I learn bootstrap or tailwind? Or both?
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
@@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.
Definitely not bootstrap. It's garbage and websites made in bootstrap look all the same.
@@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.
Please make 1 website react js with tailwind css
hey dev please make a video on redux
"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
whats the best way to learn tailwind for beginners
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 😉
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 😉
I'd say just play around with tailwind play
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
Also according to tw team apply if their biggest regret and Asistente hard to maintain 😬
Those aren’t tips and tricks but just the basics of tailwind.
"Problem with long names nad names collision"... "if your project groves..." man, .... do you hear about CSS Modules ? ..., or eg. scoped styles in vue.
I think I heard you once that tailwindcss is crap. sorry if i was wrong
Styling Tip: Always style for mobile users first
100% 😉
could we just stop with react? what's wrong with simple html....
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.
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
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.
@@WhhhhhhjuuuuuH for the class naming “problem”: BEM.
First like and comment, I loved your youtube tutorial on Nextjs 13.1
Awesome, thank you!
Isn't apply not recommended?
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
yea you can never really say "looks disabled" and it sound right.
No. You’re more gorgeous 😜😍😘
*t
first view
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.
Tip : Tip No. 1 is not a Tip. It's ba
sic CSS trick. Nothing to do with Tailwindcss
Fortnite 🙌
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
Lol these are css tips
Do NOT cuss the Lord. No need for that.
Here's a tip:
1) Never Use Tailwind, specially for big projects because your HTML will look awful with million of classes...
Things i said before trying Tailwind
Use inline-fold extension to solve this
Nice Tailwind tips. Thanks, Ed.
{2024-05-18}