@@michaelcrossley4716 It's literally CSS. It has nothing to do with React. Adam said from the beginning of the video that this presentation has nothing to do with React...
The only thing I find questionable is that he is removing props in favor of his components expecting CSS variables for certain situations. How can this be enforced/documented to other developers when using TypeScript? TypeScript can't enforce required css variable values, and it seems hard to find out that those CSS variables are required.
You get used to it and it's so liberating not having to write display: flex; align-items: center; for the 100th time in a codebase. I mean, why is reading that harder than reading regular CSS syntax or PHP for example? You can read those efficiently just because you are used to them. You get used to Tailwind the same way. Although I do agree if you dive deep into using arbitrary values (those in [ ]), then some of these classes can get pretty nasty, but from my experience that's like 1% of the CSS you write.
@@Rafael-pj4zc try to debug raw css when theres 20 definitions that manipulate same class. I would rather read through inlined tailwind and know exactly whats going on with css of that element
I love tailwindcss and use it in all my projects. But while I was watching this talk, I was thinking like, "Dude, just write css." When we start using css on 100% with all these nested styles and data attributes, it seems easier to write scoped css than to duplicate the code like that
Well, a lot of people use React with Laravel via Inertia! He could've used a Laravel backend, but the focus is on frontend only. Think he made the right call
This is why you need to learn CSS first and be good at it. Unless you understand how it works under the hood, you would never come up with those solutions in tailwind.
He is literally using tailwind to implement these solutions. But yes, you must be good at CSS in order to be good at using tailwind properly; since tailwind is just an abstraction around CSS.
@@sightninja Exactly, because he is the creator of tailwind and he has a strong foundation in CSS, which is why he can effectively use Tailwind to solve these problems. My point is about beginners who start with Tailwind and think learning just Tailwind is sufficient.
Came for Adam, stayed for CSS isolate. Wow what an easy solution for a problem I've run into multiple times for over a decade!
Great talk as always. Learnt so many techniques will definitely apply to my projects. Thank you !!
Proud to be one of devs, who know about "isolate". It was covered in Josh Comeau course "css-for-js"
I tuned out when I saw him using React. Is this something that we can use for vanilla JS?
@@michaelcrossley4716 Yes you can, it's just css
@@michaelcrossley4716 It's literally CSS. It has nothing to do with React.
Adam said from the beginning of the video that this presentation has nothing to do with React...
happy birthday parker
After Adam's this talk, i've come to the conclusion that despite being in the field of web for over 2 years, i don't know the ABC of CSS
You don't my dear friend
I've been here for 7 years, and I don't
I also have built a UI library
Epic talk.
I’ve learned so much from this talk!
Incredible stuff for real.
The only thing I find questionable is that he is removing props in favor of his components expecting CSS variables for certain situations. How can this be enforced/documented to other developers when using TypeScript? TypeScript can't enforce required css variable values, and it seems hard to find out that those CSS variables are required.
Nice talk!
All those class names look so hard to read though. Surely this is better as CSS?
You get used to it and it's so liberating not having to write display: flex; align-items: center; for the 100th time in a codebase. I mean, why is reading that harder than reading regular CSS syntax or PHP for example? You can read those efficiently just because you are used to them. You get used to Tailwind the same way.
Although I do agree if you dive deep into using arbitrary values (those in [ ]), then some of these classes can get pretty nasty, but from my experience that's like 1% of the CSS you write.
I enjoy using tailwind but yes it can be kind of hard to read & debug once the number of classes starts piling up.
@@Rafael-pj4zc try to debug raw css when theres 20 definitions that manipulate same class. I would rather read through inlined tailwind and know exactly whats going on with css of that element
@@doesitmatter yes I've been there. Poorly written & poorly organized css is a pain to manage.
I love tailwindcss and use it in all my projects. But while I was watching this talk, I was thinking like, "Dude, just write css." When we start using css on 100% with all these nested styles and data attributes, it seems easier to write scoped css than to duplicate the code like that
God what I would give to hire Adam as a Product Engineer
That ship has already sunk
I've used subgrid before. With Tailwind too. Acknowledge me.
Tailwind 3:16
Right, what a mocking fool.
I watched this live and it was very interesting. Blew my mind. Interesting he's not using Laravel at Laracon lol
Well, a lot of people use React with Laravel via Inertia! He could've used a Laravel backend, but the focus is on frontend only. Think he made the right call
css is awesome
The end 🥺
🎉
There is probably no one on the planet that knows more about CSS than Adam Wathan.
This is why you need to learn CSS first and be good at it. Unless you understand how it works under the hood, you would never come up with those solutions in tailwind.
He is literally using tailwind to implement these solutions.
But yes, you must be good at CSS in order to be good at using tailwind properly; since tailwind is just an abstraction around CSS.
@@sightninja Exactly, because he is the creator of tailwind and he has a strong foundation in CSS, which is why he can effectively use Tailwind to solve these problems. My point is about beginners who start with Tailwind and think learning just Tailwind is sufficient.
its sad that Adam switched to react from vue 😢
react is not hard try it.
Just write CSS
jesus christ
Laravel, buy better microphone for the next time please or post edit it. Thanks.
It's fine
Just for comic relief, you guys really don't want to use JavaScript.