Top 10 Tips and Tricks with Tailwind CSS

Поділитися
Вставка
  • Опубліковано 15 чер 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
  • Наука та технологія

КОМЕНТАРІ • 133

  • @developedbyed
    @developedbyed  Рік тому +21

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

    • @TomoDevelops
      @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
      @fedor_U Рік тому +2

      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
      @codeityt Рік тому +1

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

    • @LoStisWorld
      @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
      @tippififestarr6519 Рік тому

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

  • @RishiKasyap
    @RishiKasyap Рік тому +45

    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
    @tsarprince Рік тому +30

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

    • @kilo.ironblossom
      @kilo.ironblossom Місяць тому

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

  • @camcamspamspam
    @camcamspamspam Рік тому +8

    You may not see this, but I’m a college student, and this has to be the most valuable UA-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.

  • @martinlednar4009
    @martinlednar4009 Рік тому +29

    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
      @jeffwilliams1645 Рік тому +1

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

    • @piotrrodzen772
      @piotrrodzen772 Рік тому +2

      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
    @sandrinjoy Рік тому +33

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

  • @alice-smith
    @alice-smith Рік тому +16

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

  • @lko_
    @lko_ Рік тому +27

    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
      @shareefhassan8197 Рік тому

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

    • @modernkennnern
      @modernkennnern Рік тому +1

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

    • @JEsterCW
      @JEsterCW Рік тому

      @@modernkennnern its not even 3 xd its one liner

    • @modernkennnern
      @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

  • @lucaslunzmann6115
    @lucaslunzmann6115 Рік тому +3

    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
      @lukas.webdev Рік тому

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

  • @elhaambasheerch7058
    @elhaambasheerch7058 Рік тому +3

    Every tailwind beginner should watch this, helps massively !!

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

  • @jjnimes
    @jjnimes 10 місяців тому

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

  • @ericxls93
    @ericxls93 Рік тому

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

  • @russaz09
    @russaz09 11 місяців тому

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

  • @benmana7901
    @benmana7901 Рік тому +1

    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 👌🏻

  • @Melcarthus
    @Melcarthus Рік тому +1

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

  • @CanRau
    @CanRau Рік тому

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

  • @junsgk
    @junsgk Рік тому +2

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

  • @shamiul_islam
    @shamiul_islam Рік тому +1

    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.

  • @coderjacko8142
    @coderjacko8142 Рік тому

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

  • @amg4160
    @amg4160 Рік тому

    great video ed!

  • @themarksmith
    @themarksmith Рік тому +1

    Useful stuff!!

  • @rockNbrain
    @rockNbrain Рік тому

    Tks bro Nice job

  • @linusschulze5261
    @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
      @davidmutua6971 9 місяців тому

      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

  • @krismatic_
    @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
    }

  • @naranyala_dev
    @naranyala_dev Рік тому +1

    thank you, we need more tailwind examples

    • @lukas.webdev
      @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 😉

  • @m12652
    @m12652 6 місяців тому

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

  • @maxmaximus7773
    @maxmaximus7773 Рік тому +1

    Good video. What theme are you using on vscode?

  • @guilhermegirardi
    @guilhermegirardi 5 місяців тому

    Beautiful!

  • @JeffBarron1
    @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 ??

  • @CaliburPANDAs
    @CaliburPANDAs Рік тому +3

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

  • @fetyagency9808
    @fetyagency9808 8 місяців тому

    this youtuber is the best

  • @nikilk
    @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
    @quask Рік тому +1

    What theme are you using its looks very nice

  • @quickcodingtuts
    @quickcodingtuts Рік тому +2

    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
      @lukas.webdev Рік тому

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

  • @ahmedessam440
    @ahmedessam440 Рік тому

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

  • @ICOReviewtoken
    @ICOReviewtoken 11 місяців тому

    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

  • @onwardsdew
    @onwardsdew Рік тому

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

  • @Penbyte
    @Penbyte Рік тому +1

    Which vs code theme are you using?

  • @live_emulator
    @live_emulator 10 місяців тому

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

  • @tippififestarr6519
    @tippififestarr6519 Рік тому +1

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

  • @fedor_U
    @fedor_U Рік тому

    What font you using for VS Code in this video?

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

  • @nanayaw7159
    @nanayaw7159 Рік тому

    Splendid

  • @Melcarthus
    @Melcarthus Рік тому

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

  • @FalconCodes-dx2nj
    @FalconCodes-dx2nj 5 місяців тому

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

  • @dazecm
    @dazecm Рік тому +1

    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
      @dazecm Рік тому

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

    • @lukas.webdev
      @lukas.webdev Рік тому +1

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

  • @jekapan481
    @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

  • @nested9301
    @nested9301 Рік тому

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

  • @AndrewErwin73
    @AndrewErwin73 Рік тому +1

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

  • @babakfp
    @babakfp Рік тому +1

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

  • @thezeeshann
    @thezeeshann Рік тому +1

    Hi ED
    Big fan bro

  • @martinvega1452
    @martinvega1452 11 місяців тому

    great i'm new subscriber

  • @DeepakisDemigod
    @DeepakisDemigod Рік тому +1

    Seems like 2023 is way faster than 2021 & 2022 😌

  • @vickyarul989
    @vickyarul989 Рік тому

    🔥🔥

  • @phantazzor
    @phantazzor Рік тому

    what about visible/hidden with breakpoints

  • @outpost31737
    @outpost31737 Рік тому +1

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

  • @codeAlongwith
    @codeAlongwith 10 місяців тому

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

  • @lihou12
    @lihou12 9 місяців тому

    Please make 1 website react js with tailwind css

  • @slavenDj
    @slavenDj Рік тому

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

  • @abdulaziztoshpolatov757
    @abdulaziztoshpolatov757 Рік тому

    Your vwcode theme ?

  • @learner8084
    @learner8084 2 місяці тому

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

  • @ibrahimhc19
    @ibrahimhc19 Рік тому

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

    • @gustavoshigueo
      @gustavoshigueo Рік тому +2

      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
      @ibrahimhc19 Рік тому +2

      @@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
      @martiananomaly Рік тому +3

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

    • @lukas.webdev
      @lukas.webdev Рік тому +1

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

  • @AbhishekSingh-bt6uo
    @AbhishekSingh-bt6uo Рік тому

    hey dev please make a video on redux

  • @CanRau
    @CanRau Рік тому

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

  • @erichardca
    @erichardca Рік тому

    whats the best way to learn tailwind for beginners

    • @lukas.webdev
      @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
      @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
      @jacobhilker7722 10 місяців тому

      I'd say just play around with tailwind play

  • @soymidasyt
    @soymidasyt 5 місяців тому

    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

  • @ilenabrody3470
    @ilenabrody3470 Рік тому +1

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

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

  • @mrcrypticxdev
    @mrcrypticxdev Рік тому +1

    Styling Tip: Always style for mobile users first

  • @fallen_turbo
    @fallen_turbo Рік тому +1

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

  • @kevinwaag9976
    @kevinwaag9976 Рік тому

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

  • @streamxprimium3103
    @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

  • @CodeTatami
    @CodeTatami Рік тому +2

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

  • @WhhhhhhjuuuuuH
    @WhhhhhhjuuuuuH Рік тому +1

    "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

  • @stripedgoat8470
    @stripedgoat8470 Рік тому

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

    • @stripedgoat8470
      @stripedgoat8470 Рік тому

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

  • @begris
    @begris Рік тому

    Isn't apply not recommended?

  • @bitehunter122
    @bitehunter122 Рік тому +1

    No. You’re more gorgeous 😜😍😘

  • @languagelearningexperience6814
    @languagelearningexperience6814 8 місяців тому

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

  • @valeraoficial
    @valeraoficial Рік тому

    *t

  • @ezxcel
    @ezxcel Рік тому +1

    first view

  • @john-ly4ix
    @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

  • @frfrongong9712
    @frfrongong9712 Рік тому

    Fortnite 🙌

  • @chhavimanichoubey9437
    @chhavimanichoubey9437 10 місяців тому

    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
    @bishalkar5614 Рік тому

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

  • @namaefumei
    @namaefumei 11 місяців тому

    Lol these are css tips

  • @Dev_Everything
    @Dev_Everything 11 місяців тому +1

    Do NOT cuss the Lord. No need for that.

  • @lovro5110
    @lovro5110 Рік тому

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

  • @Pareshbpatel
    @Pareshbpatel 28 днів тому

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

  • @karthikeyan-lv6wu
    @karthikeyan-lv6wu Рік тому