Sam my man, I love seeing your unfiltered workflow--shortcuts and all, but especially how you update the TailwindCSS classes within the devtools before applying updates to your code in the IDE. Great stuff!
I truly like your content Sam, i often look forward to your new video on anything front-end. We appreciate what you do and the effort and grace you put in making your videos. I am fan, and also follow you on twitter and your front-end podcast series.
Awesome video @Sam thanks for sharing. I fallen in love with your VSCode set up, especially, your Vim/Tailwind/Ember plugins. Would you share it? Finally, next time, please, use a an app to show us your key-combo, they are impressive. :)
Instead of fiddling with margins for Exercise 7 at 54:24 to add gutters, you can also use the gap- utility on the parent flexbox element and save yourself that pain.
Hi, ~30min, when you deal with these Tab links, everything looks so complex for no reason. You can do the same thing with Pure CSS and could take just few lines of code. At some point Tailwind introducing more complexity. But for me the best approach is to use Pure CSS and some Tailwind helper classes for spacing (which also can be achieve with better CSS vars definitions).
This is an old comment, but I wanna add that in Tailwind 2.0, you can just extend active: in your variant so that it won't conflict with hover:. We can now use space utility for consistent spacing of the child elements. The divide utility is also saving more CSS lines. Now, thay have the official form and even aspect-ratio plugins which make this video kinda outdated tbh. I was like you before this, but after playing with Tailwind Play, I'm kinda excited right now.
That is an extension provided by Tailwind UI, but you can add it to your own project yourself by extending the spacing scale: tailwindcss.com/docs/customizing-spacing/#extending-the-default-spacing-scale
Yep! No need to force yourself in Tailwind for everything. Especially for one-off UI elements that fall outside of your design system, just use inline styles or vanilla css.
I've seen folks use them together before, SC is more about where to put the styles and TW kind of solves that problem but solves other problems too (constrained tokens, design system, etc). I personally don't feel the need for any abstraction on top of TW, using it by itself is the lowest friction way I've found to style an app. If you haven't tried it by itself I'd suggest you give it a shot vanilla!
There's still different use cases for each, I think I wouldn't jump to those components but instead start with Tailwind's classes, get to know how to use grid + flex, and extract patterns as they show up. Tailwind's grid classes especially are already extremely useful and relatively high-level so I would see how far I could get with just using them directly.
I didn't watch the full video but was unfortunate enough to get a glimpse of 1:15:43 I don't think I'm gonna sleep tonight. Holy fuck. What is going on here? Best practices? Please tell me this is a parody channel...
For those asking about keyboard shortcuts + extensions, I made a follow-up vid going over my workflow: ua-cam.com/video/qIHR2wmxy3U/v-deo.html
Sam my man, I love seeing your unfiltered workflow--shortcuts and all, but especially how you update the TailwindCSS classes within the devtools before applying updates to your code in the IDE. Great stuff!
I like your channel cause you use Next js, tailwind and framer motion. For me it is a best stack
When the creator itself endorse you, you know it's gonna be good!
I truly like your content Sam, i often look forward to your new video on anything front-end. We appreciate what you do and the effort and grace you put in making your videos. I am fan, and also follow you on twitter and your front-end podcast series.
Thank you so much for the kind words Chris!
I'm really excited to start using tailwind at my job for front end, we were previously doing inline styles with React but seems much cleaner
in exercise 7 you could use space-x-{amount} to add space between items without adding space to the left and right
The focus-visible and plugins part was very useful! Thank you, Sam!
Great content. My English is not so good but you talk and explain the concepts very well. Thanks, Sam!
your camera quality is so good, it's almost wrong
with working svgs you can use fill-current text-gray-500 in svg wrapper element also.
Sam: Excellent tutorial and hands on labs. Many thanks
You are so welcome!
Огромное Вам спасибо, супер урок!)
Wow, really great examples and explanation. Flawless :) Thank you!
Your workflow with vim seems perfect to me. Can you make a video on your workflow with vim that'd be great. Thanks!
In case you missed it I made a follow-up video on this here: ua-cam.com/video/qIHR2wmxy3U/v-deo.html
This channel is a gem 🔹
you are absolutely awesome! I really love your content, keep going
Helpful content 😊
This has been really great, better than most of the css courses out there. I hope you grow successful.
gosterdigi bir cok seyi flex ile daha rahat yapabilirsin mesela input svg vs gereksiz kasmis flexi at gec
great, I really appreciate all of your videos, I loved the way you teach
Great examples, thank you
Full of lightbulb moments this one
This video is pure gold. Thanks!
Thanks Man! Awesome, learnt so much from this.
Wow. This is excellent stuff. I learned a lot here. Thank you!
Really nice, encourage me to try tailwind right away! Thank you
I love the idea of tailwind and how it works. I have only one concern that it makes my HTML messy.
.my-custom-class {
@apply tailwind-class;
@apply another-tailwind-class;
@apply have a blessed week;
}
thanks for the excercises
Awesome! Love it.
This is great 👌
in the second example couldn't you just set full height
I wish you show your keystroke, I'd like to learn the shortcuts
Added a new video that covers this! ua-cam.com/video/qIHR2wmxy3U/v-deo.html
amazing video
This is awesome content, thanks!
Very useful thx a lot!!
Beautiful content!
Top-Notch
Awesome video @Sam thanks for sharing.
I fallen in love with your VSCode set up, especially, your Vim/Tailwind/Ember plugins. Would you share it?
Finally, next time, please, use a an app to show us your key-combo, they are impressive. :)
In case you didn't see it I made a follow-up video on this! ua-cam.com/video/qIHR2wmxy3U/v-deo.html
@@samselikoff I have seen it and thanks for the key logger! :)
Awesome video ++++++++++++ 😃
Cool
Super cool, thanks 😎
Great tutorial. Very interesting.
P.S: Position your camera somewhere else next time, so you don't always need to change between screen and camera 😉
Instead of fiddling with margins for Exercise 7 at 54:24 to add gutters, you can also use the gap- utility on the parent flexbox element and save yourself that pain.
Hi, ~30min, when you deal with these Tab links, everything looks so complex for no reason. You can do the same thing with Pure CSS and could take just few lines of code.
At some point Tailwind introducing more complexity. But for me the best approach is to use Pure CSS and some Tailwind helper classes for spacing (which also can be achieve with better CSS vars definitions).
This is an old comment, but I wanna add that in Tailwind 2.0, you can just extend active: in your variant so that it won't conflict with hover:. We can now use space utility for consistent spacing of the child elements. The divide utility is also saving more CSS lines. Now, thay have the official form and even aspect-ratio plugins which make this video kinda outdated tbh. I was like you before this, but after playing with Tailwind Play, I'm kinda excited right now.
Nice video thanks!
Which plugin are you using for sorting the classnames in the HTML file automatically ?
Did you found?
Exercise 12 was AWESOME :thumbs:
Can someone tell me which top company uses tailwind?
In the first part up until 14' you're using pb-2/3, but I don't see it anywhere in the tailwind docs .. ? What am I missing?
That is an extension provided by Tailwind UI, but you can add it to your own project yourself by extending the spacing scale: tailwindcss.com/docs/customizing-spacing/#extending-the-default-spacing-scale
npx tailwind init --full will give you full config then you can get those values in the config.
Thanks for tutorial... but if u want some custom styles do u fall back to old style css
Yep! No need to force yourself in Tailwind for everything. Especially for one-off UI elements that fall outside of your design system, just use inline styles or vanilla css.
Was trying to find VS Code theme which you use but has no luck. Can you please provide a name of your theme?
Atom One Dark
great!
When npm install the node_modules, it fails with : Maximum call stack size exceeded
Coming from react's Styled Components, does it violates Tailwind's philosophy
I've seen folks use them together before, SC is more about where to put the styles and TW kind of solves that problem but solves other problems too (constrained tokens, design system, etc). I personally don't feel the need for any abstraction on top of TW, using it by itself is the lowest friction way I've found to style an app. If you haven't tried it by itself I'd suggest you give it a shot vanilla!
@sam: what your thoughts for building grid system as component library: Flex or Grid?
There's still different use cases for each, I think I wouldn't jump to those components but instead start with Tailwind's classes, get to know how to use grid + flex, and extract patterns as they show up. Tailwind's grid classes especially are already extremely useful and relatively high-level so I would see how far I could get with just using them directly.
Sam Selikoff I’ve used tailwind in a project. It makes any kind of component development breeze
How to make classes reorganize itself?
He's using vscode Headwind plugin for this. In the following video he's explaining his setup. ua-cam.com/video/qIHR2wmxy3U/v-deo.html
how do you get the tailwind properties to sort on save?
This bad boy: marketplace.visualstudio.com/items?itemName=heybourn.headwind
@@samselikoff Thanks so much!
@@samselikoff Thanks man!
i ran across the same issue mentioned ay ua-cam.com/video/nqNIy8HkEQ8/v-deo.html. . Thanks for the workaround keeping the accessibility.
I didn't watch the full video but was unfortunate enough to get a glimpse of 1:15:43 I don't think I'm gonna sleep tonight. Holy fuck. What is going on here? Best practices? Please tell me this is a parody channel...
Why not use the style attribute if you have such a severe case of non-inline CSS phobia?
What's wrong? Seems fine to me.