What's New in Tailwind CSS v2.2

Поділитися
Вставка
  • Опубліковано 19 вер 2024

КОМЕНТАРІ • 232

  • @sasicodes
    @sasicodes 3 роки тому +18

    This guy is making the video more interesting.

  • @gohancomfejao
    @gohancomfejao 3 роки тому +41

    goddamn this is on a whole new level... the JIT mode is the best thing

  • @francisudeji209
    @francisudeji209 3 роки тому +51

    Great production quality ✔️
    Awesome features ✔️
    I know how many devs I've put on tailwindcss since 2019 and y'all deserve your flowers for making such a masterpiece

  • @jamesbhatta
    @jamesbhatta 3 роки тому +20

    I never went back to bootstrap after getting my hands on with tailwind. And now its getting more awesome features.

    • @konvicti94
      @konvicti94 3 роки тому +2

      tailwind css was made for simplicity, now it's like a write a software for The Large Hadron Collider CERN...

  • @husnulaman
    @husnulaman 3 роки тому +140

    Tailwind might be the best thing ever happened to this industry...

    • @xamantiwari
      @xamantiwari 3 роки тому +2

      Replace css sooon.....

    • @xamantiwari
      @xamantiwari 3 роки тому +1

      Expect animation 😑😑 I hope they will working for animation that's mean tailwindcss is the king of animation + design

    • @husnulaman
      @husnulaman 3 роки тому

      @@xamantiwari they already have extended css animation support. If you're referring to javascript animation, know that tailwind is a css framework

    • @xamantiwari
      @xamantiwari 3 роки тому

      @@husnulaman I know bro ... We wanted class without getting extended is gonna be animation gamer Changer

    • @x0r1k
      @x0r1k 3 роки тому

      You should check windicss. It's few steps ahead

  • @vinayrwt
    @vinayrwt 3 роки тому +10

    I was waiting for pseudo classes. Thanks alot 🙏🏻👌

  • @codeaccuna
    @codeaccuna 3 роки тому +12

    christmas came waaay earlier than expected. Every tailwindlabs package udates make me incredibly hyped to code!!!

  • @khpeiris
    @khpeiris 3 роки тому +9

    Damn you guys are literally pushing the boundaries. This update is amazing! THANK YOU! ❤️🔥

  • @nicolaskeith8872
    @nicolaskeith8872 3 роки тому +3

    oh... my... goodness... absolutely awesome video, Simon, maybe your best yet , and man-- what an update!!

    • @simonswiss
      @simonswiss 3 роки тому +3

      I think this is my best so far. Collaborating with Adam & Steve on the "section title" transitions was awesome, and it lifts the production level overall! 🎉

    • @nicolaskeith8872
      @nicolaskeith8872 3 роки тому

      @@simonswiss totally. Working with 2.2 today -- I've wanted pseudo elements for the longest time. So cool.

  • @Itwasmeeeeeee
    @Itwasmeeeeeee 3 роки тому +2

    the biggest problem for me was the setup process, this is awesome beyond imagination. from a backend dev, thank you very much

  • @sripasum3122
    @sripasum3122 3 роки тому +4

    So many goodies in the new release. Can't wait to use them all. Great video like always.
    That selection colour bug though 😁

    • @simonswiss
      @simonswiss 3 роки тому +2

      Haha, not a bug, but a feature! The browser will flat our *refuse* to apply the same bg color than the text, and it will pick another color with sufficient contrast. In that case, the color of the W is set to yellow-400 on the element. I guess "first-letter" overrides the "selection" text color. Try this in the browser: set the selection bg and selection text color to the same thing. Your browser will nope out of this and pick a color!

  • @sreekumarmenon
    @sreekumarmenon 3 роки тому +1

    I like the pace of new feature releases with tailwind! Also kudos to your video editor !

  • @Lucas-gt8en
    @Lucas-gt8en 3 роки тому +4

    I spent a couple hours this week finding out if I could somehow link up ‘npm watch’ to Tailwind CLI for a legacy project at work and then this is released, amazing timing

  • @gomflo
    @gomflo 3 роки тому +1

    Love all the efforts on the production, great explantation, great video!

  • @mryechkin
    @mryechkin 3 роки тому +1

    Loving the new setup! Production quality just keeps getting better and better :) And TIL about "length"

    • @simonswiss
      @simonswiss 3 роки тому +1

      haha we all TIL'ed on that one :D

  • @amirnoorani5017
    @amirnoorani5017 3 роки тому

    Simply you are the best teacher! learning for years and watching YT for years, don't know anybody like you!

  • @RafiDude
    @RafiDude 3 роки тому

    With release v2.2 Tailwind simply changed the game of CSS for good. Now regular plain vanilla developers like me can build professional-looking custom UIs without help. Well done!

  • @danielstill5625
    @danielstill5625 3 роки тому +1

    Switched from Material UI (which I love) to Tailwind for my portfolio site and now I think I love Tailwind more!

  • @ed1nh0
    @ed1nh0 3 роки тому

    "length"?!? Even when I think to blame Tailwind for not dealing well with those CSS vars at the end of the video, you've just remember us that it was CSS specs itself! Haha Good job!

  • @edgarasben
    @edgarasben 3 роки тому +12

    Love the simple no-setup mode! Is it possible still to have the config file without involving build tools?
    EDIT: oh I see there is a "-config" flag. Awesome! 👏

  • @ApoorvMote
    @ApoorvMote 3 роки тому +1

    17 June is my birthday and this is the best birthday gift I ever gotten. Thanks Tailwind Team!!!

    • @simonswiss
      @simonswiss 3 роки тому

      Happy birthday!! 🎉

    • @ApoorvMote
      @ApoorvMote 3 роки тому

      @@simonswiss Thanks Simon

  • @Lena-nn1fn
    @Lena-nn1fn 3 роки тому +2

    I love the content and presentation. Thank you :)

  • @K-IA
    @K-IA 3 роки тому +1

    Tailwind is the gift that keeps on giving 🔥🔥

  • @yogenp
    @yogenp 3 роки тому +1

    These videos are awesome. Keep em coming.

  • @prasadchinwal9997
    @prasadchinwal9997 3 роки тому

    This guy is killing it ! Master of making videos.

  • @Devdojo
    @Devdojo 3 роки тому

    You’re my hero! Love all the cool stuff you guys are creating 👏

  • @MrSonicastra
    @MrSonicastra 3 роки тому +1

    As always, perfection! Thanks

  • @martinsonuoha
    @martinsonuoha 3 роки тому

    Such a beautiful video, you're excited from beginning till the end

  • @Hurtwolf
    @Hurtwolf 3 роки тому +1

    Tailwind keeps blowing my mind!

  • @Grahfx
    @Grahfx 3 роки тому +1

    I'm absolute fan of this technology. This is so good and usable.

  • @AdarshMadrecha
    @AdarshMadrecha 3 роки тому +1

    👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻 Thanks for your efforts and awesome library.

  • @DaDa-gr7cy
    @DaDa-gr7cy 3 роки тому

    Always awesome and up to date, that pseudo elements are very very useful. Thanks for adding them!

  • @mhemaungthuwin7916
    @mhemaungthuwin7916 3 роки тому

    I really love your videos sir. Tailwind + Tailwind Labs tips made me love with web design.

  • @mdridoy-ef2pw
    @mdridoy-ef2pw 3 роки тому

    it's just getting better and better!
    never went back to bootstrap from the first day I used it.

  • @wayz9
    @wayz9 3 роки тому

    As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`. Just got this little message when I run my watcher. Great vid btw !

  • @tonyhill5966
    @tonyhill5966 3 роки тому +1

    IMHO, after the first 2:55 I don’t need to see anything else!!! Tailwind is 🔥🔥🔥

  • @Troy-ol5fk
    @Troy-ol5fk 3 роки тому

    Can I replace the 'first-of-type' in the tag with a 'first' in the tag ?

  • @SwimmingEagle14
    @SwimmingEagle14 3 роки тому +1

    Excellent work!

  • @danvilela
    @danvilela 3 роки тому +1

    I am clapping here just so you know. I am new to tailwind but this is freaking awesome!

  • @acaua
    @acaua 3 роки тому +1

    Amuse bouche?! You are too classy, sir! 🧐 Here's Google for our rescue:
    In fine dining, amuse-bouche are the small bites preceding the main course. An amuse-bouche is not usually included on the final bill, so they are often presented to diners as a “gift from the kitchen.” An amuse-bouche is typically a little bite that packs big, interesting flavors.

    • @simonswiss
      @simonswiss 3 роки тому +1

      Haha love to see that was appreciated to its full value ✨

  • @apvarun
    @apvarun 3 роки тому

    One of the biggest updates in a while :) Love it!

  • @chrissalgaj4111
    @chrissalgaj4111 3 роки тому +18

    What is the name of the plugin formatting your classes into multiline?

    • @NicolasGagne
      @NicolasGagne 3 роки тому +3

      Prettier

    • @adamtak3128
      @adamtak3128 3 роки тому +3

      @@NicolasGagne I have prettier setup and it's never turned my tailwind classes into multi line.

    • @MrTommieboy
      @MrTommieboy 3 роки тому +6

      @@adamtak3128 It's a recent change in prettier@2.3.0

    • @Yassinebridii
      @Yassinebridii 3 роки тому +5

      It's still doesn't work with react's className though, there is an open issue about that.

    • @vindjedouatchomba7742
      @vindjedouatchomba7742 3 роки тому

      @@adamtak3128 same for me

  • @MichaelKret
    @MichaelKret 3 роки тому

    this new cli is just what I need, thank you very much

  • @RaymondAtivie
    @RaymondAtivie 3 роки тому +1

    how did tailwind get soooooo great??? glad i hoped on early

    • @simonswiss
      @simonswiss 3 роки тому +1

      Folks like to look down on Tailwind Labs making money by selling Tailwind UI components, but... this is *precisely* how Adam & Steve were able to focus full time on Tailwind CSS, hire a small team and make it soooooo great 👍

  • @hazeemfernandez4640
    @hazeemfernandez4640 3 роки тому

    I'm currently creating my project and I will definitely use this.

  • @jenstornell
    @jenstornell 3 роки тому

    So many great features!! Good work everyone!

  • @ChumX100
    @ChumX100 3 роки тому

    Nice, hoping to see variant groups at some point 🤞

  • @it-s-me-mohit
    @it-s-me-mohit 3 роки тому +1

    Awesome video and features. What about working with Angular? Will these be supported there too?

  • @cokktail
    @cokktail 3 роки тому

    The features are awesome, but I'm here just vibing to the music

  • @a7medalyousofi
    @a7medalyousofi 3 роки тому

    Great update that i was waiting for.
    thanks Tailwind.

  • @cristianpallares3847
    @cristianpallares3847 3 роки тому

    I already loved Tailwind for what it was, yet I've to say I'm surprised with all these improvements! Amazing work and good presentation!

  • @jeroenvanrensen9505
    @jeroenvanrensen9505 3 роки тому

    Really fun and original video!

    • @simonswiss
      @simonswiss 3 роки тому

      Thank you, I tried to make it fun!

  • @sir_brian_d
    @sir_brian_d 3 роки тому

    Damn, Tailwind is crushing it

  • @DivDax
    @DivDax 3 роки тому +1

    just awesome!

  • @venkataramananrajendran3525
    @venkataramananrajendran3525 3 роки тому +1

    100th like!!! pretty needed features. great go tailwind people :)

  • @dagoacarralero5080
    @dagoacarralero5080 3 роки тому +1

    Now i know what you was saying on twitter, awesome video

    • @simonswiss
      @simonswiss 3 роки тому +1

      Haha, that's the one!

  • @afifu
    @afifu 3 роки тому

    Amazing, as always! 🤩✨

  • @dance2die
    @dance2die 3 роки тому

    Great update, great presentation!

  • @azam920
    @azam920 3 роки тому

    Videos are just going awesome 😎 very addictive

  • @codephilip
    @codephilip 3 роки тому

    Awesome!!! 🚀

  • @jmagrippis
    @jmagrippis 3 роки тому

    Amazing release, and impressive demo skills!

  • @Billiam112
    @Billiam112 3 роки тому

    Looks great! Will definitely try out. Although, I seem to be the only one worried about how using tailwind would have a negative impact on my css knowledge/memory. If I were to use tailwind 100%, I suspect I would be terrible at css with a new employer were they not to use tailwind. 🤷‍♂️

  • @peymanta8923
    @peymanta8923 3 роки тому

    Awesome stuff dude, keep it up, thank you.

  • @RakeshYadav-sp4tp
    @RakeshYadav-sp4tp 3 роки тому

    This is the future.

  • @CarlMercier
    @CarlMercier 3 роки тому

    Awesome work! What’s the font in your editor?

  • @adithwp
    @adithwp 3 роки тому

    So many takeaways. But one of the OOT takeaways is I learn that "x-data" stuff on the markup is made possible by Alpine.js :D

  • @harlleybh
    @harlleybh 3 роки тому

    CSS Revolution

  • @isaaccloos1084
    @isaaccloos1084 3 роки тому

    Love the framework and love this channel

  • @siamekanto
    @siamekanto 3 роки тому

    How many CSS Features can we possibly put into one Framework?
    TailwindCSS : Yes

  • @ColjaCarls
    @ColjaCarls 3 роки тому

    Finally someone who does the "hand on camera lens" transition right 😂

  • @endernator
    @endernator 3 роки тому +2

    wooowwww boooom 🤯😍

  • @atnguyenthanh3108
    @atnguyenthanh3108 3 роки тому +1

    You're so amazing!

  • @RedVelocityTV
    @RedVelocityTV 3 роки тому

    JIT Compiler the greatest invention since avocado on toast

  • @averstrum6372
    @averstrum6372 3 роки тому

    This update has changed everything, THANKS. Got rid of node folder, just for tailwind-projects.
    For @tailwindcss/forms just import inside the first line of your input css. @import "./forms.css";
    Transform in your input file crashes the build process, as it does not understand the word, transform-gpu is ok.
    selectbox padding got removed too. Few other minor errors, otherwise great update. Tailwind Intellisense seems not to be working?

  • @snakemanluffy7645
    @snakemanluffy7645 3 роки тому

    Awesome!! :D

  • @ammarkhan5658
    @ammarkhan5658 3 роки тому +1

    You need to remove the price tag from that cartoony hoody. :D

  • @AdrianBTV1
    @AdrianBTV1 3 роки тому +1

    Unexpected oodie 😂

    • @simonswiss
      @simonswiss 3 роки тому

      Haha it's soooooo good. I'm wearing it right now!

  • @jamnanthakit9219
    @jamnanthakit9219 3 роки тому

    Awesome as always!

  • @RedStone576
    @RedStone576 3 роки тому

    awesome!

  • @jithureddy
    @jithureddy 3 роки тому

    Great video.. Really appreciate the usage of alpine.js for dynamic layouts.
    This is master piece of tailwind new version, whole set of new features without writing any plugins much needed for us.
    By the way I am using tailwindui components so is there a chance we get branding tshirts and logos to market tailwind projects ??

  • @_nndrei
    @_nndrei 3 роки тому

    Thanks for the video!!!

  • @kohelet910
    @kohelet910 2 роки тому

    You are awesome ❤️

  • @ColjaCarls
    @ColjaCarls 3 роки тому +2

    Please enlighten me, as someone who does like to write css code myself: I love using css classes to describe the semantic of the Node based on how it should be styled and then implement it apart from the HTML. This approach here as well as most of the other css frameworks seem to clutter the html with details of information that comes close to writing inline css. Why?

    • @woutertt
      @woutertt 3 роки тому

      You can refactor it afterwards with @apply if you want a cleaner html output.

  • @wisdom_ose
    @wisdom_ose 3 роки тому +1

    Words are not enough to express my joy so this emoji should do ❤️

    • @simonswiss
      @simonswiss 3 роки тому

      Awwweeee ❤️ right back!

  • @ZynthProductions
    @ZynthProductions 3 роки тому

    wow this video so good! learn so much new things and JIT is really our saver

  • @SFDCFacts
    @SFDCFacts 3 роки тому

    Bootstrap - Coca Cola
    Tailwind - Water

  • @CodeWithRVR
    @CodeWithRVR 3 роки тому +1

    Failed in more more love with #tailwindcss ^2.0 recent updates
    like JIT and many more
    Also, it was released on 18 Nov
    On my birthday 😇

  • @tristanlukens7158
    @tristanlukens7158 3 роки тому

    I never want to go back to vanilla css, tailwind is the best

  • @saschamajewsky7990
    @saschamajewsky7990 3 роки тому +3

    When tailwindcss merch?

  • @FADHsquared
    @FADHsquared 3 роки тому

    "Oh no, actually oh yes" 😂

  • @amraromoro
    @amraromoro 3 роки тому

    I love you man greats from Egypt ❤

  • @rangelesproduction
    @rangelesproduction 3 роки тому

    Nice tutorial vid... please make a tutorial vid on how to create a dynamic navbar with multiple dropdown menu.

  • @tririfandani1876
    @tririfandani1876 3 роки тому

    Exciting stuff 🔥

  • @kelvinsmith4894
    @kelvinsmith4894 3 роки тому

    And this is what we all been asking for…

  • @JohnSmith-zl8rz
    @JohnSmith-zl8rz 3 роки тому

    Random question but: any way that VS code (any extension?) to order the tailwind classes, just by example: like "bg bg-red-100" before than "px" and others, not like "px" first and later "bg bg-red-100", you know too keep the whole code more clear, I end with classes sometimes first, sometimes later etc.

  • @cr0w312
    @cr0w312 3 роки тому

    as always, insane!!!

  • @swabhyaasgatecs2733
    @swabhyaasgatecs2733 3 роки тому

    Woahh, Its tastier :)

  • @ThisIsFray1
    @ThisIsFray1 3 роки тому

    awesome

  • @pawekoaczynski4505
    @pawekoaczynski4505 3 роки тому

    that is very nice

  • @leonie9248
    @leonie9248 3 роки тому

    Good stuff!