0Pricing
Tailwind CSS Academy icon

Tailwind CSS Academy

HTMLCssFrontendDesign

เชี่ยวชาญ Tailwind CSS ซึ่งเป็น utility-first CSS framework ที่ได้รับความไว้วางใจจาก OpenAI, Vercel และ Shopify เรียนรู้ทุก utility, responsive design, dark mode, animations และ production optimization

🤖 ขับเคลื่อนด้วย AI📚 คอร์ส 30👥 ผู้เรียน 100,000+ คน⭐ คะแนน 4.9
ภาพรวมคอร์ส

Tailwind CSS Mastery

เชี่ยวชาญ utility-first CSS framework ที่ได้รับความไว้วางใจจาก OpenAI, Vercel และ Shopify เรียนรู้ทุก utility, responsive design, dark mode, animations และ production optimization แทร็กนี้ครอบคลุม 30 mini-courses ที่ก้าวหน้าตั้งแต่ระดับเบื้องต้น (A1) ถึงระดับสูงขั้น (B2) โดยมีบทเรียนสั้นๆ ที่เน้นเรื่องเดียว และ quiz สั้นๆ เพื่อยึดแน่นแต่ละแนวคิด

สิ่งที่คุณจะได้เรียนรู้

คุณจะเริ่มต้นจากพื้นฐานและสร้างขึ้นผ่านหัวข้อระดับกลางและสูงขั้น โดยแต่ละคอร์สจะสร้างขึ้นจากคอร์สที่แล้ว บทเรียนทุกบทเรียนเป็นไปได้ในทางปฏิบัติ พร้อมตัวอย่างจริงและ AI tutor ที่สามารถช่วยเหลือเมื่อคุณต้องการ

วิธีการทำงาน

แต่ละคอร์สแบ่งออกเป็นบทเรียน 4 บทที่เน้นเรื่องเดียว เรียนให้เสร็จไม่กี่บทเรียนต่อวัน และคุณจะเชี่ยวชาญแทร็กเต็มไว้ในหลายสัปดาห์ ไม่ใช่หลายเดือน

เริ่มเรียนรู้ →

วิธีการเรียนรู้ของคุณ

🎯
บทเรียนแบบโต้ตอบ
แบบฝึกหัดการเขียนโค้ดโดยตรงพร้อมข้อเสนอแนะแบบเรียลไทม์
🤖
ติวเตอร์ AI
ได้รับความช่วยเหลือแบบทันทีจาก AI ของเราเมื่อคุณติดขัด
💻
ตัวแก้ไขในตัว
เขียนและรันโค้ดโดยตรงในเบราว์เซอร์ของคุณ
🏆
ใบรับรอง
ได้รับใบรับรองเมื่อคุณเสร็จสิ้นหลักสูตร
หลักสูตร

30 หลักสูตร

ทุกหลักสูตรในเส้นทางการเรียนรู้ Tailwind CSS Academy

01

Tailwind CSS คืออะไร

A14 บทเรียน

ทำความรู้จักแนวคิดที่ให้คลาสอรรถประโยชน์เป็นหลักของ Tailwind CSS และทำความเข้าใจว่าต่างจากเฟรมเวิร์ก CSS แบบดั้งเดิมอย่าง Bootstrap อย่างไร…

02

ยูทิลิตีด้านตัวอักษร

A14 บทเรียนPRO

เชี่ยวชาญชุดยูทิลิตีด้านตัวอักษรที่หลากหลายของ Tailwind เพื่อควบคุมขนาด แบบน้ำหนัก ความสูงบรรทัด ระยะห่างตัวอักษร และการจัดแนวข้อความ เรียน…

03

สีและพื้นหลัง

A14 บทเรียนPRO

สำรวจชุดสีที่หลากหลายของ Tailwind และเรียนรู้การใช้สีพื้นหลัง ไล่ระดับสี และภาพพื้นหลัง ทำความเข้าใจการใช้ตัวปรับความทึบและการสร้างพื้นผิวท…

04

ระยะห่าง: ระยะขอบและระยะ内

A14 บทเรียนPRO

เรียนรู้มาตราส่วนระยะห่างที่สม่ำเสมอของ Tailwind เพื่อเพิ่มระยะขอบและระยะ内ให้กับองค์ประกอบใดก็ได้ ทำความเข้าใจทางลัดสำหรับทิศทางต่าง ๆ และร…

05

Flexbox ด้วย Tailwind

A14 บทเรียนPRO

ใช้เค้าโครง CSS Flexbox ด้วยยูทิลิตี flex ของ Tailwind โดยไม่ต้องเขียน CSS แบบกำหนดเองแม้แต่บรรทัดเดียว สร้างเค้าโครงแนวนอนและแนวตั้ง ควบคุ…

06

เค้าโครง Grid ด้วย Tailwind

A24 บทเรียนPRO

ใช้ CSS Grid ผ่านยูทิลิตี grid ของ Tailwind เพื่อสร้างเค้าโครงสองมิติที่ซับซ้อน กำหนดคอลัมน์ แถว และพื้นที่ด้วยชื่อคลาสที่เรียบง่าย พร้อมคว…

07

การกำหนดขนาด: ความกว้าง ความสูง และอัตราส่วน

A24 บทเรียนPRO

ควบคุมขนาดขององค์ประกอบด้วยยูทิลิตีความกว้าง ความสูง ข้อจำกัดค่าต่ำสุดและสูงสุด และอัตราส่วนของ Tailwind สร้างองค์ประกอบที่ปรับตามหน้าจอและ…

08

เส้นขอบและเงา

A24 บทเรียนPRO

จัดรูปแบบขอบและความลึกขององค์ประกอบด้วยยูทิลิตีเส้นขอบและเงาของ Tailwind เรียนรู้การเพิ่มมุมโค้ง ควบคุมความกว้างและสีของเส้นขอบ และใช้เงากล…

09

สถานะเมื่อวางเมาส์ โฟกัส และสถานะอื่น

A24 บทเรียนPRO

เพิ่มการโต้ตอบให้ส่วนติดต่อผู้ใช้ด้วยการใช้รูปแบบตามเงื่อนไขเมื่อวางเมาส์ โฟกัส กำลังใช้งาน ถูกปิดใช้งาน และสถานะจำลองอื่น ๆ เรียนรู้ระบบคำ…

10

จุดแบ่งการออกแบบที่ปรับตามหน้าจอ

A24 บทเรียนPRO

สร้างเค้าโครงที่ปรับเข้ากับหน้าจอทุกขนาดด้วยจุดแบ่งแบบปรับตามหน้าจอโดยเริ่มจากอุปกรณ์เคลื่อนที่เป็นหลักของ Tailwind ใช้คลาสยูทิลิตีที่แตกต่…

11

โหมดมืดด้วย Tailwind

B14 บทเรียนPRO

ใช้งานโหมดมืดในเว็บแอปด้วยตัวแปร dark ที่มีมาให้ในตัวของ Tailwind เรียนรู้ความแตกต่างระหว่างกลยุทธ์แบบคลาสกับกลยุทธ์แบบสื่อ และสร้างองค์ประ…

12

ไฟล์การกำหนดค่า Tailwind

B14 บทเรียนPRO

ปลดล็อกพลังของ Tailwind อย่างเต็มที่ด้วยการเชี่ยวชาญไฟล์ tailwind.config.js เรียนรู้การขยายธีมเริ่มต้น เพิ่มค่าที่กำหนดเอง กำหนดค่าเส้นทางเ…

13

สี แบบอักษร และระยะห่างแบบกำหนดเอง

B14 บทเรียนPRO

ปรับ Tailwind ให้เข้ากับแบรนด์ของคุณด้วยการเพิ่มสีแบบกำหนดเอง ผสาน Google Fonts และกำหนดมาตราส่วนระยะห่างแบบกำหนดเอง สร้างภาษาการออกแบบเฉพา…

14

คำสั่ง @apply

B14 บทเรียนPRO

เรียนรู้ว่าเมื่อใดและอย่างไรจึงควรใช้คำสั่ง @apply ของ Tailwind เพื่อแยกรูปแบบยูทิลิตีที่ซ้ำกันออกมาเป็นคลาส CSS ที่นำกลับมาใช้ใหม่ได้ สร้า…

15

ภาพเคลื่อนไหวและการเปลี่ยนผ่าน

B14 บทเรียนPRO

เพิ่มการเคลื่อนไหวที่ลื่นไหลให้ส่วนติดต่อผู้ใช้ด้วยยูทิลิตีการเปลี่ยนผ่านและภาพเคลื่อนไหวที่มีมาให้ในตัวของ Tailwind เรียนรู้การควบคุมระยะเ…

16

รูปแบบองค์ประกอบ: ปุ่ม การ์ด ป้าย

B14 บทเรียนPRO

สร้างองค์ประกอบพื้นฐานของส่วนติดต่อผู้ใช้ที่สวยงามและนำกลับมาใช้ใหม่ได้ด้วยคลาสยูทิลิตีของ Tailwind เรียนรู้รูปแบบมาตรฐานของปุ่มที่มีรูปแบบ…

17

รูปแบบองค์ประกอบ: แถบนำทางและแถบด้านข้าง

B14 บทเรียนPRO

สร้างแถบนำทางที่ปรับตามหน้าจอและแถบด้านข้างที่ยุบได้ด้วยยูทิลิตีของ Tailwind เรียนรู้การจัดการเมนูแฮมเบอร์เกอร์บนอุปกรณ์เคลื่อนที่ และสร้าง…

18

รูปแบบองค์ประกอบ: แบบฟอร์มและช่องรับข้อมูล

B14 บทเรียนPRO

จัดรูปแบบองค์ประกอบแบบฟอร์มที่เข้าถึงได้และสวยงามด้วยยูทิลิตีของ Tailwind เรียนรู้การสร้างช่องรับข้อความ รายการเลือก ช่องทำเครื่องหมาย ปุ่ม…

19

รูปแบบองค์ประกอบ: หน้าต่างโมดัลและเมนูดรอปดาวน์

B14 บทเรียนPRO

สร้างรูปแบบส่วนติดต่อผู้ใช้แบบซ้อนทับ เช่น หน้าต่างโมดัล กล่องโต้ตอบ และเมนูดรอปดาวน์ด้วย Tailwind และ JavaScript เพียงเล็กน้อย เรียนรู้การ…

20

โหมด JIT และการปรับปรุงสำหรับการใช้งานจริง

B14 บทเรียนPRO

ทำความเข้าใจเอนจิน Just-In-Time ของ Tailwind และวิธีที่เอนจินสร้างเฉพาะ CSS ที่คุณใช้งาน เรียนรู้การปรับชุดโค้ดสำหรับการใช้งานจริง วิเคราะห…

21

โทเค็นการออกแบบและการกำหนดธีมอย่างเป็นระบบ

B24 บทเรียนPRO

วางระบบโทเค็นการออกแบบที่แข็งแรงภายในการกำหนดค่าของ Tailwind เพื่อรองรับธีมหลายแบรนด์ที่สอดคล้องกัน เชื่อมโทเค็นพื้นฐานเข้ากับโทเค็นเชิงควา…

22

Tailwind กับ React และ Next.js

B24 บทเรียนPRO

ผสาน Tailwind CSS เข้ากับแอปพลิเคชัน React และ Next.js โดยใช้การตั้งค่าอย่างเป็นทางการ เรียนรู้แนวทางปฏิบัติที่ดีในการใช้ยูทิลิตีใน JSX จัด…

23

การผสาน Headless UI

B24 บทเรียนPRO

ผสาน Tailwind CSS กับ Headless UI เพื่อสร้างองค์ประกอบที่เข้าถึงได้อย่างเต็มรูปแบบและไม่มีรูปแบบตายตัว ใช้คลาส Tailwind ของคุณเองกับเมนู กล…

24

การเขียนปลั๊กอิน Tailwind

B24 บทเรียนPRO

ขยายความสามารถของ Tailwind ด้วยการเขียนปลั๊กอินแบบกำหนดเองที่เพิ่มยูทิลิตี องค์ประกอบ และตัวแปรใหม่ เรียนรู้ API ของปลั๊กอินเพื่อรวบรวมตรรก…

25

องค์ประกอบที่เข้าถึงได้ด้วย Tailwind

B24 บทเรียนPRO

สร้างองค์ประกอบส่วนติดต่อผู้ใช้ที่เป็นไปตามมาตรฐานการเข้าถึงของ WCAG โดยใช้ยูทิลิตีของ Tailwind สำหรับความต่างสี การจัดการโฟกัส และการรองรั…

26

Tailwind สำหรับการใช้งานจริง: ขนาดชุดโค้ดและแนวทางปฏิบัติที่ดี

B24 บทเรียนPRO

นำแนวทางปฏิบัติระดับมืออาชีพมาใช้ในการนำ Tailwind CSS ไปใช้งานในแอปพลิเคชันจริง เรียนรู้การตรวจสอบชุดโค้ด กลยุทธ์การจัดระเบียบคลาส การตรวจร…

27

การสร้างหน้าแลนดิ้งเพจแบบเต็มรูปแบบ

B24 บทเรียนPRO

นำทุกสิ่งที่เรียนรู้มาสร้างหน้าแลนดิ้งเพจการตลาดที่สมบูรณ์และปรับตามหน้าจอได้ตั้งแต่เริ่มต้น โดยใช้ Tailwind CSS เพียงอย่างเดียว ครอบคลุมส่…

28

การสร้างส่วนติดต่อผู้ใช้แดชบอร์ด

B24 บทเรียนPRO

สร้างส่วนติดต่อผู้ดูแลระบบที่มีคุณสมบัติครบถ้วนด้วย Tailwind CSS สร้างแถบด้านข้าง แถบด้านบน การ์ดสถิติ ตารางข้อมูล และวิดเจ็ตพื้นที่สำรองสำ…

29

สถาปัตยกรรม CSS ด้วย Tailwind

B24 บทเรียนPRO

สำรวจว่า Tailwind เข้ากับกลยุทธ์สถาปัตยกรรม CSS ในภาพรวมที่ใช้กับโครงการขนาดใหญ่อย่างไร เรียนรู้การจัดระเบียบไฟล์ การวางโครงสร้างชั้นองค์ปร…

30

โครงงานสรุป: ระบบการออกแบบด้วย Tailwind

B24 บทเรียนPRO

รวบรวมทักษะทั้งหมดจากเส้นทางการเรียนรู้นี้เพื่อสร้างระบบการออกแบบที่ใช้ Tailwind อย่างสมบูรณ์ กำหนดโทเค็น สร้างไลบรารีองค์ประกอบ เขียนปลั๊ก…

คำถามที่พบบ่อย

คำถามที่พบบ่อย

หลักสูตร Tailwind CSS Academy ฟรีหรือไม่

ใช่ คุณสามารถเริ่มหลักสูตร Tailwind CSS Academy ได้ฟรีและเสร็จสิ้นบทเรียนแบบโต้ตอบโดยไม่มีค่าใช้จ่าย การสมัครสมาชิก PRO ที่เป็นทางเลือกจะปลดล็อกเครื่องมือ AI ขั้นสูงและใบรับรองที่แชร์ได้

ฉันต้องมีประสบการณ์มาก่อนหรือไม่ในการเรียนรู้ HTML

ไม่ หลักสูตรเริ่มต้นด้วยพื้นฐานและค่อยๆ ไปสู่หัวข้อที่ซับซ้อนมากขึ้น ดังนั้นคุณสามารถเริ่มได้แม้ว่าจะไม่มีประสบการณ์ HTML มาก่อน

ฉันจะเรียนรู้ HTML บน CoddyKit ได้อย่างไร

คุณเรียนรู้โดยการลงมือทำ บทเรียนสั้น ๆ แบบโต้ตอบจับคู่คำอธิบายที่ชัดเจนกับแบบฝึกหัดการเขียนโค้ดที่ทำงานในเวลาจริง และติวเตอร์ AI ที่ทำงาน 24/7 ให้ความช่วยเหลือแบบบุคคลเมื่อคุณติดขัด

ฉันได้รับใบรับรองสำหรับการเสร็จสิ้น Tailwind CSS Academy หรือไม่

ใช่ ผู้เรียน PRO สามารถสอบและได้รับใบรับรองการเสร็จสิ้นที่แชร์ได้พร้อมรหัสที่สามารถตรวจสอบได้สำหรับหลักสูตร Tailwind CSS Academy

ฉันสามารถเรียนรู้ HTML บนโทรศัพท์ของฉันได้หรือไม่

ใช่ CoddyKit พร้อมใช้งานบนเว็บและเป็นแอปพลิเคชันแบบเนทีฟ iOS และ Android ดังนั้นคุณสามารถเรียนรู้ HTML บนอุปกรณ์ใดก็ได้และความคืบหน้าของคุณจะซิงค์ในทุกอุปกรณ์

เริ่มเรียน Tailwind CSS Academy ตอนนี้

เข้าร่วมกับผู้เรียนนับพันคนที่กำลังเรียนรู้การเขียนโปรแกรมผ่านบทเรียนที่ขับเคลื่อนด้วย AI

เริ่มฟรี →ดูคอร์สทั้งหมด