TailwindCSS v4 First Look - Better at Everything?!

Ғылым және технология

TailwindCSS 4 is now in Alpha. V4 features new engine built from the ground-up, making it up to 10x faster. It's also much easier to import into your project, and composing variants of selectors is a breeze. Let's write some code and check out TailwindCSS 4!
🔗 Socials:
X - x.com/arielweinberger
LinkedIn - linkedin.com/in/arielweinberger
Timestamps:
00:00 Intro
00:11 Importing Tailwind 4
01:04 CSS Variables in Tailwind 4
02:12 Variant Selector Composition in Tailwind 4
03:32 Tailwind 4 Engine & Rust
04:30 Recap
📚 Resources
Open-sourcing our progress on Tailwind CSS v4.0
tailwindcss.com/blog/tailwindcss-v4-alpha

Пікірлер: 14

  • @codinglyio
    @codinglyio2 ай бұрын

    I’m curious if common design systems will work with v4 straight out of the box. shadcn, I’m looking at you 👀

  • @clemonsLA
    @clemonsLA2 ай бұрын

    Short, live code, cutting edge tech.. instant subscribe.

  • @codinglyio

    @codinglyio

    2 ай бұрын

    This makes me happy. I myself am tired of seeing KZreadrs just reading blog posts on camera.

  • @clemonsLA

    @clemonsLA

    2 ай бұрын

    @@codinglyio Exactly! You're going to be BIG once you figure out who your target audience is (and what stack they're using). Mark my words.

  • @Saralmk
    @Saralmk2 ай бұрын

    Awesome video!

  • @HighTechPictures
    @HighTechPictures2 ай бұрын

    thanks for sharing. i'm excited.

  • @zonedetec5969
    @zonedetec59692 ай бұрын

    Really nice video! Thank you!

  • @codinglyio

    @codinglyio

    2 ай бұрын

    I appreciate it!

  • @Pareshbpatel
    @PareshbpatelАй бұрын

    Great intro to some features of TailwinfCSS v4. Thanks. {2024-04-21} - Subscribed!

  • @ryanbrown9102
    @ryanbrown9102Ай бұрын

    I hate when content creators start their videos with a post-installation status, and you find yourself struggling for 2 hours (as if time is not the most valuable resource in the universe) in order to apply tailwindcss-4 onto an existing project. Making it to (FINALLY! 🥵) work was really tough and exhausting. Source code could have been helpful as well. Thanks anyway.. p.s. 03:27 - mmm className="group-has-hover-has-active:opacity-0" - doesn't work.

  • @oof-software
    @oof-softwareАй бұрын

    Thanks for the video! Also your audio is a bit out of sync.

  • @rtx__3090
    @rtx__30902 ай бұрын

    I DONT EVEN HAVE NO MORE MOTIVATION FOR THIS WEB DEV SHI FUCK DEVIN I WILL GET REPLACED

  • @codinglyio

    @codinglyio

    2 ай бұрын

    Stay strong man, you’re an RTX 3090 after all. AI needs you for inference, lol.

  • @rtx__3090

    @rtx__3090

    2 ай бұрын

    @@codinglyio I'm a fookin GPU💪