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
4 ай бұрын
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
@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!
@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
@elhaambasheerch7058
Жыл бұрын
Every tailwind beginner should watch this, helps massively !!
@alice-smith
Жыл бұрын
In VS Code you can press Ctrl+ (by default) to get the autocomplete inside the class prop :^)
@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 ... 😉
@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 👌🏻
@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.
@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.
@camcamspamspam
Жыл бұрын
You may not see this, but I’m a college student, and this has to be the most valuable KZitem 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.
@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 :)
@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% 😉
@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
@junsgk
Жыл бұрын
9:34 you can also do "bg-black/70"
@Melcarthus
Жыл бұрын
Tailwind is so awesome. I have started using it recently and have build(marked up) two websites and they where done much quicker!
@ericxls93
Жыл бұрын
So good you are doing full stack going forwards! Snapshots of “steps” makes learning twice as hard!
@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 }
@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... 😉
@CanRau
Жыл бұрын
Using space-y and space-x all the time, love them 🥰
@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 😉
@coderjacko8142
Жыл бұрын
I was literally figuring out some things with Tailwind and boom, your video pops up haha... Thanks for the tips Ed :)
@m12652
9 ай бұрын
Great stuff! How about a video on container queries in Tailwind, in the context of redefining a grid layout…. Please 👍
@fetyagency9808
Жыл бұрын
this youtuber is the best
@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!
@tippififestarr6519
Жыл бұрын
at 16:09 I think it's a typo? lg:max-2 maybe should be lg:max-w
@themarksmith
Жыл бұрын
Useful stuff!!
@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
@amg4160
Жыл бұрын
great video ed!
@Penbyte
Жыл бұрын
Which vs code theme are you using?
@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...
@rockNbrain
Жыл бұрын
Tks bro Nice job
@guilhermegirardi
9 ай бұрын
Beautiful!
@live_emulator
Жыл бұрын
i find using the @apply for reusable components in React. That's the only it makes sense to me to use that.
@maxmaximus7773
Жыл бұрын
Good video. What theme are you using on vscode?
@outpost31737
Жыл бұрын
Tailwind takes some learning and adding custom CSS can be a pain but overall I like it and to hell with the purists :)
@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 ??
@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
@Melcarthus
Жыл бұрын
Yes, tailwind really teaches you the inheritance of CSS that it was suppose to be used as.
@quask
Жыл бұрын
What theme are you using its looks very nice
@DeepakisDemigod
Жыл бұрын
Seems like 2023 is way faster than 2021 & 2022 😌
@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 ... 😉
@FalconCodes-dx2nj
9 ай бұрын
What's the benefit of using css variables in the tailwind config instead of just pasting the hex value, can someone please explain
@onwardsdew
Жыл бұрын
Great video and awesome vscode color theme. What theme do you use? Can I copy your theme and vscode settings? =)
@nested9301
Жыл бұрын
Iwas just wondering if tailwind worth it and i got the answer thank u
@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 ?
@phantazzor
Жыл бұрын
what about visible/hidden with breakpoints
@thezeeshann
Жыл бұрын
Hi ED Big fan bro
@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
@ahmedessam440
Жыл бұрын
hello ed, if i may ask is there any way to write tailwind classes under each other not next to each other
@learner8084
6 ай бұрын
I wonder. Does it mean that I don't use CSS Selectors in Tailwind at all ?
@codeAlongwith
Жыл бұрын
How can I run an onclick event handler to show hidden content?
@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
@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
@martinvega1452
Жыл бұрын
great i'm new subscriber
@fedor_U
Жыл бұрын
What font you using for VS Code in this video?
@lihou12
Жыл бұрын
Please make 1 website react js with tailwind css
@slavenDj
Жыл бұрын
Use ctrl space to show suggestions that's more vscode tip 😅
@nanayaw7159
Жыл бұрын
Splendid
@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.
@mrcrypticx1
Жыл бұрын
Styling Tip: Always style for mobile users first
@lukas.webdev
Жыл бұрын
100% 😉
@ilenabrody3470
Жыл бұрын
Those aren’t tips and tricks but just the basics of tailwind.
@abdulaziztoshpolatov757
Жыл бұрын
Your vwcode theme ?
@fallen_turbo
Жыл бұрын
First like and comment, I loved your youtube tutorial on Nextjs 13.1
@developedbyed
Жыл бұрын
Awesome, thank you!
@soymidasyt
9 ай бұрын
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
Жыл бұрын
🔥🔥
@CodeTatami
Жыл бұрын
I think I heard you once that tailwindcss is crap. sorry if i was wrong
@kevinwaag9976
Жыл бұрын
could we just stop with react? what's wrong with simple html....
@CanRau
Жыл бұрын
Also according to tw team apply if their biggest regret and Asistente hard to maintain 😬
@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
@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.
@AbhishekSingh-bt6uo
Жыл бұрын
hey dev please make a video on redux
@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.
@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
@begris
Жыл бұрын
Isn't apply not recommended?
@languagelearningexperience6814
11 ай бұрын
yea you can never really say "looks disabled" and it sound right.
@bitehunter122
Жыл бұрын
No. You’re more gorgeous 😜😍😘
@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
@ezxcel
Жыл бұрын
first view
@valeraoficial
Жыл бұрын
*t
@Dev_Everything
Жыл бұрын
Do NOT cuss the Lord. No need for that.
@frfrongong9712
Жыл бұрын
Fortnite 🙌
@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
@namaefumei
Жыл бұрын
Lol these are css tips
@lovro5110
Жыл бұрын
Here's a tip: 1) Never Use Tailwind, specially for big projects because your HTML will look awful with million of classes...
Пікірлер: 134