Frontend Developer Tries Tailwind for the First Time
My experience of diving into TailwindCSS to create a simple menu component.
Tailwind CSS is one of the most popular and loved libraries related to CSS. Developers either love it or hate it. I actually never even tried it out until now; in this video, I document my experience of diving into it to create a simple menu component.
TLDR; Tailwind feels like writing CSS by desperately trying to avoid writing CSS.
Chapters
- 00:00 Intro
- 00:30 Demo setup and a few words about Tailwind CSS
- 01:25 Exploring Tailwind CSS documentation
- 02:03 How to add Tailwind CSS on CodePen
- 02:34 How to apply linear-gradient to the html/body element on CodePen
- 04:52 How to set min-height to html/body element on CodePen using Tailwind CSS
- 05:13 How to intuitively tweak (background) colors in Tailwind CSS
- 05:38 How to create a container with semi-transparent background using Tailwind CSS
- 06:41 Exploring why background opacity isn’t working in Tailwind CSS on CodePen
- 07:08 How to add Tailwind CSS v3.3.0 on CodePen
- 07:48 How to add margin and padding using Tailwind CSS
- 08:56 How to set up layout using flexbox in Tailwind CSS
- 10:16 How to tweak font size in Tailwind CSS
- 11:12 How to add gap between flexbox items in Tailwind CSS
- 11:54 How to add hover effect to links using Tailwind CSS
- 12:45 How to add transition property using Tailwind CSS
- 13:37 How to add background to menu items using Tailwind CSS
- 15:00 The challenge of adding classes on multiple elements in Tailwind CSS
- 15:38 How to tweak menu items using flexbox in Tailwind CSS (flex-wrap, align-items)
- 16:32 How to create a responsive version in Tailwind CSS
- 17:01 How to use responsive break points in Tailwind CSS (flexbox-row, flexbox-column)
- 19:22 How to tweak display property on menu items in Tailwind CSS
- 19:36 A note on working more effectively in Tailwind CSS using multiple cursors
- 20:36 How to justify flexbox items in Tailwind CSS
- 20:54 How to tweak resposnive design spacing (gap-x, gap-y)
- 21:17 A note on how intuitive Tailwind CSS really is
- 21:38 Tutorial recap and a notice on using Tailwind CSS on CodePen
- 22:13 Conclusion — what I think about Tailwind CSS based on first impression
