Uploaded January 2023 | Updated September 2026, 3 weeks ago
In this video I talk about what Tailwind is and what it is not. I discuss the differences between Tailwind and Bootstrap. I also discuss Tailwind component libraries which are comparable to Bootstrap. I also discuss some of the reasons you might use Tailwind. I also discuss css utility libraries that came before Tailwind. I then talk about how I am going to be using Tailwind and Skeleton in a SvelteKit app I am building.
💜 Follow on Twitch: twitch.tv/codinggarden
📩 Sign up for my mailing list: https://list.coding.garden/
💖 Donate: https://coding.garden/donate
😍 Pledge: https://coding.garden/pledge
💬 Discord: https://coding.garden/discord
🎉 Stickers: https://coding.garden/stickers
💻 Gear List: https://coding.garden/gear
🔎 Search for more Coding Garden videos here: https://coding.garden/videos
🗣 View the Coding Garden FAQ here: github.com/CodingGarden/faqs
Tunnel animation from here - youtube.com/watch?v=H1x44w3wGro
--- listd Full Stack App Build where we will be using SvelteKit and Tailwind/Skeleton
Past Episodes and Summaries - youtube.com/playlist?list=PLM_i0obccy3ujNeSo0EoVppCYDr8YwjSQ
The code - github.com/codingGarden/listd
- Summary of the Tailwind Twitter Drama - twitter.com/coding_garden/status/1614736964577812482
--- Tailwind vs Bootstrap
Tailwindcss - tailwindcss.com
Bootstrap - getbootstrap.com
--- CSS Frameworks
Bulma - bulma.io
UIkit - getuikit.com
Pure CSS - purecss.io
Materialize - materializecss.com
--- CSS Utility Libraries
So you need a CSS utility library? | Chris Coyier - css-tricks.com/need-css-utility-library
CSS utility classes: Your library of extendable styles | Russell Bishop - blog.logrocket.com/css-utility-classes-library-extendable-styles
Shed CSS - tedconf.github.io/shed-css/index.html
Tachyons - tachyons.io
Basscss - basscss.com
turretcss turretcss.com
In the video I also did not mention WindiCSS, twind or unocss - learn more about them here:
WindiCSS - windicss.org
twind - https://twind.style/
unocss - github.com/unocss/unocss
--- Tailwind CSS Component Libraries
daisyUI - daisyui.com
Flowbite - flowbite.com
Sailboat UI - sailboatui.com
--- Svelte
Svelte - https://svelte.dev/
Svelte Kit - https://kit.svelte.dev/
--- Svelte Component Libraries Built On Top of Tailwind
Flowbite Svelte - flowbite-svelte.com
Konsta UI - konstaui.com
Skeleton - https://www.skeleton.dev/
Smelte JS - smeltejs.com
--- Tailwind VS Code Extensions
Tailwind CSS IntelliSense - marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Inline fold - marketplace.visualstudio.com/items?itemName=moalamri.inline-fold
Automatic Class Sorting with Prettier - tailwindcss.com/blog/automatic-class-sorting-with-prettier
00:00 Intro
00:19 What is Tailwind?
00:53 UI Built with CSS/BEM
01:25 UI Built with Tailwind
01:51 Tailwind is a Design System
02:05 Magic Numbers in CSS
03:27 Tailwind is another thing to learn
03:45 Tailwind is NOT Bootstrap
05:03 @apply directive
05:58 Bootstrap has utility classes
06:40 CSS Frameworks
07:15 CSS Utility Libraries
08:20 Tailwind Component Libraries
08:38 TailwindUI
09:01 daisyUI
09:50 Flowbite
10:07 Sailboat UI
10:32 The CSS Developer Experience
11:37 Tailwind VS Code Plugins
12:24 SvelteKit
12:59 We want Tailwind + Interactivity
13:42 Skeleton
16:35 Other Svelte Component Libraries
17:02 Flowbite Svelte
17:32 Konsta UI
18:49 Closing Words
19:42 Utility Classes are Useful
In this video I talk about what Tailwind is and what it is not. I discuss the differences between Tailwind and Bootstrap. I also discuss Tailwind component libraries which are comparable to Bootstrap. I also discuss some of the reasons you might use Tailwind. I also discuss css utility libraries that came before Tailwind. I then talk about how I am going to be using Tailwind and Skeleton in a SvelteKit app I am building.
💜 Follow on Twitch: twitch.tv/codinggarden
📩 Sign up for my mailing list: https://list.coding.garden/
💖 Donate: https://coding.garden/donate
😍 Pledge: https://coding.garden/pledge
💬 Discord: https://coding.garden/discord
🎉 Stickers: https://coding.garden/stickers
💻 Gear List: https://coding.garden/gear
🔎 Search for more Coding Garden videos here: https://coding.garden/videos
🗣 View the Coding Garden FAQ here: github.com/CodingGarden/faqs
Tunnel animation from here - youtube.com/watch?v=H1x44w3wGro
--- listd Full Stack App Build where we will be using SvelteKit and Tailwind/Skeleton
Past Episodes and Summaries - youtube.com/playlist?list=PLM_i0obccy3ujNeSo0EoVppCYDr8YwjSQ
The code - github.com/codingGarden/listd
- Summary of the Tailwind Twitter Drama - twitter.com/coding_garden/status/1614736964577812482
--- Tailwind vs Bootstrap
Tailwindcss - tailwindcss.com
Bootstrap - getbootstrap.com
--- CSS Frameworks
Bulma - bulma.io
UIkit - getuikit.com
Pure CSS - purecss.io
Materialize - materializecss.com
--- CSS Utility Libraries
So you need a CSS utility library? | Chris Coyier - css-tricks.com/need-css-utility-library
CSS utility classes: Your library of extendable styles | Russell Bishop - blog.logrocket.com/css-utility-classes-library-extendable-styles
Shed CSS - tedconf.github.io/shed-css/index.html
Tachyons - tachyons.io
Basscss - basscss.com
turretcss turretcss.com
In the video I also did not mention WindiCSS, twind or unocss - learn more about them here:
WindiCSS - windicss.org
twind - https://twind.style/
unocss - github.com/unocss/unocss
--- Tailwind CSS Component Libraries
daisyUI - daisyui.com
Flowbite - flowbite.com
Sailboat UI - sailboatui.com
--- Svelte
Svelte - https://svelte.dev/
Svelte Kit - https://kit.svelte.dev/
--- Svelte Component Libraries Built On Top of Tailwind
Flowbite Svelte - flowbite-svelte.com
Konsta UI - konstaui.com
Skeleton - https://www.skeleton.dev/
Smelte JS - smeltejs.com
--- Tailwind VS Code Extensions
Tailwind CSS IntelliSense - marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Inline fold - marketplace.visualstudio.com/items?itemName=moalamri.inline-fold
Automatic Class Sorting with Prettier - tailwindcss.com/blog/automatic-class-sorting-with-prettier
00:00 Intro
00:19 What is Tailwind?
00:53 UI Built with CSS/BEM
01:25 UI Built with Tailwind
01:51 Tailwind is a Design System
02:05 Magic Numbers in CSS
03:27 Tailwind is another thing to learn
03:45 Tailwind is NOT Bootstrap
05:03 @apply directive
05:58 Bootstrap has utility classes
06:40 CSS Frameworks
07:15 CSS Utility Libraries
08:20 Tailwind Component Libraries
08:38 TailwindUI
09:01 daisyUI
09:50 Flowbite
10:07 Sailboat UI
10:32 The CSS Developer Experience
11:37 Tailwind VS Code Plugins
12:24 SvelteKit
12:59 We want Tailwind + Interactivity
13:42 Skeleton
16:35 Other Svelte Component Libraries
17:02 Flowbite Svelte
17:32 Konsta UI
18:49 Closing Words
19:42 Utility Classes are Useful
