ເຊື່ອວ່ານັກພັດທະນາເວັບໄຊທ໌ຫຼາຍຄົນ ຕ້ອງໄດ້ຜ່ານການນຳໃຊ້ CSS ມາແລ້ວ ບໍ່ຫຼາຍກໍ່ໜ້ອຍ, ແຕ່ວ່າໃນການທີ່ໃຊ້ CSS ແບບປົກກະຕິນັ້ນ ແມ່ນມີຂໍ້ຈຳກັດ ແລະ ຄວາມຫຍຸ້ງຍາກຫຼາຍຢ່າງ ເພື່ອທີ່ຈະພັດທະນາເວັບໄຊທ໌ໃຫ້ສວຍງາມ ແລະ ປະຢັດເວລາ.

ສະນັ້ນ, CSS Framework ຈິ່ງເປັນຕົວເລືອກທີ່ນັກພັດທະນາເວັບໄຊທ໌ຫຼາຍຄົນ ປ່ຽນມາເລືອກໃຊ້ ເພື່ອປະຢັດເວລາໃນການອອກແບບ ແລະ ພັດທະນາໜ້າຕາ UI ຂອງເວັບໄຊທ໌. ນອກນັ້ນ, ຍັງໄດ້ເວັບໄຊທ໌ທີ່ສວຍງາມອີກດ້ວຍ.

CSS Framework ແມ່ນຫຍັງ?

CSS Framework ເປັນຊຸດເຄື່ອງມືທີ່ຊ່ວຍໃຫ້ນັກພັດທະນາສາມາດອອກແບບໜ້າຕາ ແລະ ພັດທະນາເວັບໄຊທ໌ໄດ້ຢ່າງວ່ອງໄວ ໂດຍທີ່ເຮົາບໍ່ຈຳເປັນຕ້ອງຂຽນ Code ເອງທັງໝົດ ເພາະວ່າຕົວ CSS Framework ໄດ້ມີການກະກຽມ ຊຸດ Code ໄວ້ໃຫ້ເຮົາສາມາດກັອບໄປໃຊ້ງານໄດ້ເລີຍ ເຊິ່ງມັນສະດວກສະບາຍ ແລະ ປະຢັດເວລາຫຼາຍ ແຖມຍັງເຮັດໃຫ້ເວັບໄຊທ໌ເຮົາ ມີການອອກແບບທີີ່ເປັນມາດຕະຖານໃນທຸກໆອົງປະກອບ.

ເຊິ່ງໃນບົດຄວາມນີ້ ຈະເວົ້າເຖິງ 1 ໃນ CSS Framework ທີ່ມາແຮງໃນຊ່ວງ 2-3 ປີທີ່ຜ່ານມາ ແລະ ຍັງຄອງອັນດັບ 1 ໃນໃຈຂອງນັກພັດທະນາເວັບໄຊທ໌ຫຼາຍໆຄົນ ເຊິ່ງນັ້ນກໍ່ຄື: Tailwind CSS

Tailwind CSS ແມ່ນຫຍັງ?

Tailwind CSS ເປັນ Utility-first CSS framework ເຊິ່ງຊ່ວຍໃຫ້ນັກພັດທະນາສາມາດພັດທະນາໜ້າຕາເວັບໄຊທ໌ໄດ້ໄວ ໂດຍທີ່ບໍ່ຈຳເປັນຕ້ອງສ້າງ CSS Class ເພື່ອເປືອງພື້ນທີ່ Project ແຕ່ວ່າຈະນຳເອົາ ຄ່າຂອງແຕ່ລະຕົວຂອງ CSS ມາກຳນົດເປັນ className ແທນເຊັ່ນ: m-10 ໝາຍເຖິງ margin: 10, rounded-full ໝາຍເຖິງ border-radius: 100%

ສຳລັບໃຜທີ່ສົນໃຈນຳໃຊ້ສາມາດເຂົ້າໄປອ່ານທີ່ເອກະສານນຳໃຊ້ທາງເວັບໂດຍກົງໄດ້ : Installation - Tailwind CSS

ປຽບທຽບການນຳໃຊ້ Tailwind CSS ແລະ CSS ແບບປົກກະຕິ

ແບບປົກກະຕິ

//HTML
<div class="box">
   Hello This is Tailwind CSS
</div>

//CSS
.box{
   padding: 1rem;
   border: 1px solid red;
   border-radius: 50%;
   width: 50px;
   height: 50px;
}

ແບບນຳໃຊ້ TailwindCSS

//HTML + TailwindCSS

<div class="p-1rem border border-red-500 w-[50px] h-[50px] rounded-[50%]">
   Hello This is Tailwind CSS
</div>

ຈະສັງເກດເຫັນວ່າເຮົາບໍ່ຈຳເປັນຕ້ອງສ້າງ class ຂຶ້ນມາໃໝ່ ຫຼື ສ້າງຟາຍ CSS ຫຼາຍອັນ, ເຮົາສາມາດນຳເອົາຄ່າຕ່າງໆ ມາວ່າງໃສ່ class ໄດ້ເລີຍ ກໍ່ຈະໄດ້ຜົນລັບທີ່ຄືກັນ.

ຂໍ້ດີ ແລະ ຂໍ້ເສຍຂອງ TailwindCSS

ຂໍ້ດີ:

• ສາມາດພັດທະນາໜ້າເວັບໄດ້ໄວ.
• ຫຼຸດການເກີດ Bug ຂອງ CSS.
• ຫຼຸດຂະໜາດຂອງຟາຍ HTML ແລະ ພື້ນທີ່ຂອງໂປຣເຈັກໄດ້.
• ສາມາດອອກແບບໜ້າເວັບໃຫ້ຮອງຮັບກັບທຸກຂະໜາດໜ້າຈໍໄດ້ງ່າຍ (Responsive Web Design).

ຂໍ້ເສຍ:

• ໃນກໍລະນີທີ່ວັດຖຸ ມີຮູບຮ່າງໜ້າຕາທີ່ມີຄວາມຊັບຊ້ອນ ແລະ ສວຍງາມສູງ ຕົວ class ກໍ່ມີຊື່ຈະຫຼາຍໄປນຳ.
• ກໍລະນີທີ່ມີຫຼາຍວັດຖຸຢູ່ດ້ວຍການ ຈະເຮັດໃຫ້ Code ເຮົາບໍ່ເປັນລະບຽບ ແລະ ອ່ານຍາກຈົນເກີນໄປ.
• ບາງລູກຫຼິ້ນຂອງ CSS ກໍ່ຍັງບໍ່ຖືກຮອງຮັບ ຍັງຕ້ອງໄດ້ໃຊ້ເຄື່ອງມືຕົວອື່ນຊ່ວຍ.

ແລະນີ້ກໍ່ເປັນການແນະນຳໃຫ້ຮູ້ຈັກກັບ Tailwind CSS ແບບໄວໆ, ສຳລັບຜູ້ໃດທີ່ສົນໃຈທີ່ຈະນຳໃຊ້ ແລະ ຢາກໃຫ້ເຮັດເນື້ອຫາກ່ຽວກັບ TailwindCSS ສາມາດຄອມເມັ້ນທາງລຸ່ມໄດ້ເລີຍ. ເພາະວ່າເຮົາມີເທັກນິກຕ່າງໆໃນການໃຊ້ ແລະ ການກຳຈັດຂໍ້ເສຍຂອງ TailwindCSS ນຳອີກດ້ວຍ.

ຂອບໃຈທຸກໆທ່ານທີ່ອ່ານແຕ່ຕົ້ນຈົນຈົບ, ຫວັງວ່າບົດຄວາມນີ້ຈະເປັນຄວາມຮູ້ບໍ່ໜ້ອຍກໍ່ຫຼາຍສຳລັບຜູ້ອ່ານ!