Skip to content
UX/UI Engineer Roadmap

Watch & Read: Tailwind CSS + shadcn/ui

Videos to Watch

Section titled “Videos to Watch”

Thai

Section titled “Thai”
Design System คืออะไร? ทำไมคนทำ UI UX ต้องรู้จักมัน
Designil TH
TailwindCSS 3.x สำหรับผู้เริ่มต้น [FULL COURSE]
KongRuksiam Official TH
Tailwind CSS ต่างจาก CSS ยังไง?
MilerDev TH
วิธีติดตั้ง shadcn/ui + Tailwind 4 กับ Vite React JS
รอยไทย พัฒนา TH

English

Section titled “English”
Tailwind CSS Full Course 2023
JS Mastery EN
Tailwind CSS Tutorial
PedroTech EN
shadcn/ui Crash Course
shadcn EN
Tailwind CSS Full Course
Dave Gray EN
Tailwind in 100 Seconds
Fireship EN

Documentation & Reading

Section titled “Documentation & Reading”
Tailwind CSS Official
เอกสารอย่างเป็นทางการของ Tailwind CSS ครบทุก utility class
shadcn/ui Official
Component library สำหรับ React ที่ใช้ Tailwind CSS เป็นหลัก
Headless UI
Unstyled, accessible UI components สำหรับ Tailwind CSS

Practice Games

Section titled “Practice Games”
Tailwind Play
ลองเล่น Tailwind แบบ online -- เขียนโค้ดแล้วเห็นผลทันที

Bonus: Alternative CSS Frameworks

Section titled “Bonus: Alternative CSS Frameworks”
Bootstrap
CSS framework เก่าแก่ที่สุด ยังนิยมในองค์กรใหญ่ — component-based, ใช้ class names แบบ semantic
Material UI (MUI)
React component library จาก Google — ใช้ Material Design, เหมาะกับ enterprise apps
Chakra UI
React component library ที่เน้น accessibility + developer experience ดีมาก
Ant Design
Component library จาก Alibaba — ครบ เยอะ เหมาะกับ admin/dashboard
DaisyUI
Plugin สำหรับ Tailwind CSS — เพิ่ม component classes (btn, card, modal) ให้ Tailwind
Radix UI
Headless (unstyled) primitives สำหรับ React — shadcn/ui สร้างบน Radix