Tailwind CSS: A Utility-First CSS Framework และ API สำหรับการออกแบบที่รวดเร็วและตอบสนอง

เฟรมเวิร์ก CSS ของ Tailwind

แม้ว่าฉันจะเชี่ยวชาญด้านเทคโนโลยีทุกวัน แต่ฉันไม่มีเวลามากพอที่จะแบ่งปันการผสานรวมที่ซับซ้อนและระบบอัตโนมัติที่บริษัทของฉันดำเนินการให้กับลูกค้า เช่นกัน ฉันไม่ค่อยมีเวลาค้นพบ เทคโนโลยีส่วนใหญ่ที่ฉันเขียนถึงคือบริษัทที่แสวงหา Martech Zone ครอบคลุมพวกเขา แต่บางครั้ง - โดยเฉพาะอย่างยิ่งผ่าน Twitter - ฉันเห็นข่าวลือเกี่ยวกับเทคโนโลยีใหม่ที่ฉันต้องการแบ่งปัน

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

CSS Frameworks

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

  • บูต – กรอบการทำงานที่พัฒนามาเป็นเวลากว่าทศวรรษ ซึ่งเปิดตัวครั้งแรกโดย Twitter มันมีคุณสมบัติมากมาย มันมีข้อเสียที่ต้องใช้ SASS ยากต่อการโอเวอร์โหลด ขึ้นอยู่กับ JQquery และโหลดค่อนข้างหนัก
  • Bulma – กรอบงานที่สะอาดซึ่งเป็นมิตรกับนักพัฒนาและไม่มีการพึ่งพา JavaScript
  • รากฐาน – เฟรมเวิร์ก CSS ทั่วไปและใช้งานได้มากกว่า ซึ่งมีส่วนประกอบมากมายที่ปรับแต่งได้ง่าย นอกจากนี้ยังมี มูลนิธิสำหรับอีเมล และ Motion UI สำหรับแอนิเมชั่น
  • ชุด UI – การผสมผสานระหว่าง HTML, JavaScript และ CSS เพื่อให้ส่วนหน้าของคุณพัฒนาอย่างรวดเร็วและง่ายดาย

เฟรมเวิร์ก CSS ของ Tailwind

แม้ว่าเฟรมเวิร์กอื่นๆ จะรองรับองค์ประกอบอินเทอร์เฟซผู้ใช้ยอดนิยมได้อย่างดี แต่ Tailwind ก็ใช้วิธีที่เรียกว่า Atomic CSS. กล่าวโดยย่อ Tailwind จัดระเบียบชื่อชั้นเรียนอย่างชาญฉลาดโดยใช้ภาษาธรรมชาติเพื่อทำในสิ่งที่พวกเขาพูด ดังนั้น แม้ว่า Tailwind จะไม่มีไลบรารีของส่วนประกอบ แต่ความสามารถในการสร้างอินเทอร์เฟซที่ตอบสนองและทรงพลังได้อย่างง่ายดายเพียงแค่อ้างอิงชื่อคลาส CSS นั้นสวยงาม รวดเร็ว และไม่มีใครเทียบได้

ต่อไปนี้คือตัวอย่างที่ยอดเยี่ยมจริงๆ:

CSS Grids

คอลัมน์ css เริ่มกริด คอลัมน์

CSS Gradients

การไล่ระดับสี css

รองรับ CSS สำหรับโหมดมืด

css โหมดมืด

Tailwind ยังมีสิ่งที่ยอดเยี่ยมอีกด้วย นามสกุลใช้ได้ สำหรับ VS Code เพื่อให้คุณสามารถระบุและแทรกคลาสได้อย่างง่ายดายจากโปรแกรมแก้ไขโค้ดของ Microsoft

Tailwind จะลบ CSS ที่ไม่ได้ใช้ทั้งหมดออกโดยอัตโนมัติเมื่อสร้างสำหรับการผลิต ซึ่งหมายความว่าชุด CSS สุดท้ายของคุณมีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้ อันที่จริง โปรเจ็กต์ Tailwind ส่วนใหญ่จัดส่ง CSS น้อยกว่า 10kB ไปยังไคลเอนต์

คุณคิดอย่างไร?

ไซต์นี้ใช้ Akismet เพื่อลดสแปม เรียนรู้วิธีการประมวลผลข้อมูลความคิดเห็นของคุณ.