Uploaded April 2023 | Updated September 2026, 1 hour ago
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.
π Links
Tailwind Navbar Codepen: codepen.io/ZoranJambor/pen/oNPOyGK
CSS Navbar Codepen: codepen.io/ZoranJambor/pen/NWLgoeR
CSS Navbar Video: youtu.be/abzMSYsnXV4
Tailwind CSS Docs: tailwindcss.com/docs
π 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
Support CSS Weekly by buying my course:
π₯ Mastering Prettier & Stylelint: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
π css-weekly.com
Keep up-to-date with CSS Weekly:
π Twitter: twitter.com/CSSWeekly
π Instagram: instagram.com/cssweekly
π Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
π Blog: zoranjambor.com
π Twitter: twitter.com/zoranjambor
π LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#tailwindcss #css
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.
π Links
Tailwind Navbar Codepen: codepen.io/ZoranJambor/pen/oNPOyGK
CSS Navbar Codepen: codepen.io/ZoranJambor/pen/NWLgoeR
CSS Navbar Video: youtu.be/abzMSYsnXV4
Tailwind CSS Docs: tailwindcss.com/docs
π 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
Support CSS Weekly by buying my course:
π₯ Mastering Prettier & Stylelint: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
π css-weekly.com
Keep up-to-date with CSS Weekly:
π Twitter: twitter.com/CSSWeekly
π Instagram: instagram.com/cssweekly
π Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
π Blog: zoranjambor.com
π Twitter: twitter.com/zoranjambor
π LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#tailwindcss #css
