ເວັບງາມຕາມໃຈສັ່ງດ້ວຍ TailwindCSS

ເມື່ອເວົ້າເຖິງເຟຣມເວີກ (Framework) ຂອງ CSS ແລ້ວ, ຫຼາຍໆຄົນກໍຈະນຶກເຖິງ Bootstrap ເຊິ່ງເປັນເຟຣມເວີກ CSS ທີ່ໄດ້ຮັບຄວາມນິຍົມທີ່ສຸດໂດຍອ້າງອີງຈາກເວັບໄຊ State of CSS ແລະ ປະສົບການຂອງຜູ້ຂຽນເອງ (ເຫັນແຕ່ຄົນໃຊ້ Bootstrap ຮາຮາ). ແຕ່ວ່າໃນມື້ນີ້, ຜູ້ຂຽນຈະພາຜູ້ອ່ານມາທໍາຄວາມຮູ້ຈັກກັບ TailwindCSS ເຊິ່ງເປັນເຟຣມເວີກ CSS ທີ່ຜູ້ຂຽນກໍາລັງໃຊ້ຢູ່ ແລະ ກ້າເວົ້າໄດ້ວ່າ ມັນດີກວ່າ Bootstrap ເສຍອີກ! ບໍ່ກ່າວຍາວ ເຮົາມາເລີ່ມຕົ້ນກັນເລີຍ!

Bosutorapu Vs Teruwindo

TailwindCSS 101

TailwindCSS ເປັນເຟຣມເວີກ CSS ແບບ Utilities-First ທີ່ຊ່ວຍໃຫ້ເຮົາສາມາດອອກແບບໜ້າຕ່າງການໃຊ້ງານ (User Interface) ໄດ້ຕາມທີ່ເຮົາຕ້ອງການໄດ້ຢ່າງງ່າຍດາຍ (ຫຼືບໍ່?) ໂດຍຈະມີຄຼາສແບບ Utilities (Utilities Class) ທີ່ໃຫ້ເຮົານໍາໄປປະຍຸກສ້າງຄອມໂພເນນທ໌ (Component) ຕາມແບບຂອງເຮົາເອງໄດ້. ຟັງເບິ່ງແລ້ວ, ມັນກໍຈະຄ້າຍຄືກັນກັບເຟຣມເວີກ CSS ອັນອື່ນ, ແຕ່ຊ້າກ່ອນ! ມາລອງເບິ່ງໂຄດທີ່ໃຊ້ສ້າງປຸ່ມ (Button) ດ້ວຍ Bootstrap ແລະ Tailwind ກ່ອນວ່າມັນຈະເປັນແນວໃດ.

ສັງເກດເຫັນວ່າ Bootstrap ໃຊ້ພຽງ 2 class ກໍຄື btn btn-primary ເທົ່ານັ້ນ; ແຕ່ວ່າ Tailwind ພັດໃຊ້ເຖິງ 5 class ພຸ້ນ! ກໍຄືທີ່ໄດ້ກ່າວໄປແລ້ວວ່າ Tailwind ເປັນເຟຣມເວີກ CSS ທີ່ໃຫ້ເຮົາອອກແບບສ້າງຄອມໂພເນນທ໌ຈາກຄຼາສດ້ວຍຕົວເຮົາເອງ ເຊິ່ງຕ່າງຈາກອັນອື່ນທີ່ຈະກໍານົດມາໃຫ້ສໍາເລັດຮູບແລ້ວ.

ເພື່ອໃຫ້ເຮົາເຂົ້າໃຈແນວຄິດຂອງ Tailwind ຕື່ມ, ເຮົາມາຮຽນຮູ້ກັນວ່າ ຮູບແບບການນໍາໃຊ້ຂອງມັນເປັນແນວໃດກັນເລີຍ.

Utility-First is Key

ໂດຍປົກກະຕິແລ້ວ, ເວລາທີ່ເຮົາຕ້ອງການສ້າງໜ້າຕ່າງການໃຊ້ງານ ຫຼື ຄອມໂພເນນທ໌ໃດໜຶ່ງໂດຍໃຊ້ແບບຂອງຕົນເອງແມ່ນເຮົາຈະຕ້ອງໄດ້ຂຽນ CSS ຂຶ້ນມາເອງ; ແຕ່ຖ້າເຮົາໃຊ້ Tailwind ເຮົາກໍພຽງແຕ່ໃຊ້ຄຼາສ Utility ທີ່ກໍານົດຄ່າຕ່າງມາໃຫ້ກ່ອນໄດ້ເລີຍ.

ຈາກຕົວຢ່າງຂອງການນໍາໃຊ້ Tailwind ໃນການສ້າງປຸ່ມນັ້ນ ຜູ້ຂຽນສາມາດອະທິບາຍໄດ້ດັ່ງນີ້:

• bg-blue ເປັນການກໍານົດພື້ນຫຼັງໃຫ້ເປັນສີຟ້າ
• text-white ເປັນການກໍານົດຕົວອັກສອນໃຫ້ເປັນສີຂາວ
• px-4 ແລະ py-2 ເປັນການກໍານົດ padding ຕາມລວງນອນ ແລະ ລວງຕັ້ງຕາມລໍາດັບ
• rounded ເປັນການກໍານົດຮູບຮ່າງໃຫ້ມີຂອບແຈເປັນມົນໆ

ຈະເຫັນໄດ້ວ່າ Tailwind ຊ່ວຍໃຫ້ເຮົາສ້າງໜ້າຕ່າງການໃຊ້ງານຕາມການອອກແບບຂອງເຮົາໄດ້ງ່າຍກວ່າທີ່ເຄີຍ. ແຕ່ຖ້າວ່າເຮົາບໍ່ຢາກຂຽນຄຼາສຫຼາຍໆອັນແບບນີ້ຊໍ້າກັນຫຼາຍບ່ອນໆ, ເຮົາກໍຍັງສາມາດສ້າງເປັນຄອມໂພເນນທ໌ໄດ້ໂດຍນໍາໃຊ້ຄໍາສັ່ງ @applyດັ່ງລຸ່ມນີ້:

ໝາຍເຫດ: ໃນການທີ່ຈະປັບແຕ່ງຕາມໃຈໄດ້ ຈໍາເປັນຕ້ອງໄດ້ຕິດຕັ້ງແພັກເກັດຂອງ Tailwind ລົງໂປຣເຈັກຂອງເຮົາເພື່ອທໍາການປັບແຕ່ງກ່ອນ, ຖ້າວ່າເຮົາໃຊ້ຜ່ານ CDN ເຮົາກໍຈະໄດ້ພຽງແຕ່ຄຼາສ Utility ເທົ່ານັ້ນ ບໍ່ສາມາດປັບແຕ່ງຄຸນສົມບັດອື່ນໆໄດ້.

ການຕິດຕັ້ງ ແລະ ໃຊ້ງານ

ການຕິດຕັ້ງແມ່ນຄ້າຍຄືກັນກັບເຟຣມເວີກ CSS ອື່ນໆກໍຄື ຕິດຕັ້ງຜ່ານ npm ຫຼື yarn ກໍໄດ້

# via npm
npm install tailwindcss
# via yarn
yarn add tailwindcss

ຫຼັງຈາກນັ້ນກໍສ້າງຟາຍ CSS ໜຶ່ງຂຶ້ນມາເພື່ອນໍາໃຊ້ Tailwind ແລ້ວເພີ່ມຄໍາສັ່ງດັ່ງລຸ່ມນີ້:

ໂດຍ Tailwind ຈະທໍາການປ່ຽນຈາກ base, components ແລະ utilities ໄປເປັນ CSS Class ປົກກະຕິໃນເວລາທີ່ເຮົາ Process ຟາຍນີ້, ເຊິ່ງເຮົາສາມາດສ້າງ Component ສະເພາະຂອງເຮົາໄດ້ໃນຟາຍນີ້ເລີຍ.

ຖ້າເຮົາຕ້ອງການປັບແຕ່ງຄຸນສົມບັດເຊັ່ນ ຄ່າສີ,​ ຂະໜາດຟອນໃນຕົວ Tailwind ແມ່ນຕ້ອງໄດ້ສ້າງຟາຍຕັ້ງຄ່າຂອງມັນດ້ວຍຄໍາສັ່ງ npx tailwind init ແລ້ວເຮົາຈະໄດ້ຟາຍ tailwind.config.js ໃຫ້ເຮົາໄປຈັດການປັບແຕ່ງ.

ສໍາລັບການ Process ຟາຍ Tailwind ນີ້ມີຫຼາຍວິທີ, ເຊິ່ງໃນບົດຄວາມນີ້ຈະນໍາສະເໜີວິທີທີ່ງ່າຍກໍຄືໃຊ້ຄໍາສັ່ງລຸ່ມນີ້:

npx tailwind build your-custom-tailwind.css -o output.css

ແລ້ວເຮົາກໍຈະໄດ້ຟາຍ CSS ທີ່ເຮົາໄດ້ປັບແຕ່ງພ້ອມໃຊ້ງານແລ້ວ!

ໝາຍເຫດ: ສໍາລັບວິທີການ Process ແບບອື່ນແມ່ນຈະໄດ້ນໍາສະເໜີໃນບົດຄວາມຕໍ່ໄປ ເຊິ່ງຈະໄດ້ນໍາໃຊ້ຄວບຄູ່ກັບ Framework ຢ່າງ Angular, React ແລະ Vue.

ສະຫຼຸບຄື…

Tailwind ເປັນເຟຣມເວີກ CSS ທີ່ເໝາະສົມສໍາລັບການອອກແບບໜ້າຕ່າງຕາມແບບຂອງເຮົາ (Custom Design) ທີ່ສຸດຖ້າທຽບກັບເຟຣມເວີກອື່ນ. ແນວໃດກໍຕາມ,​ ດ້ວຍການທີ່ມັນໃຫ້ເຮົາສ້າງຄອມໂພເນນທ໌ດ້ວຍຕົນເອງກໍອາດຈະບໍ່ເໝາະກັບວຽກທີ່ຮີບດ່ວນປານໃດ, ອີກທັງຂະໜາດຂອງຟາຍກໍໃຫຍ່ກວ່າໝູ່ອີກ ເຊິ່ງຜູ້ຂຽນຈະໄດ້ນໍາສະເໜີວິທີການແກ້ໄຂບັນຫາດັ່ງກ່າວໃນບົດຄວາມຕໍ່ໄປ.

ອີກຂໍ້ດີຢ່າງໜຶ່ງຂອງ Tailwind ຕາມຄວາມຄິດສ່ວນຕົວກໍຄື ມັນຊ່ວຍໃຫ້ເຮົາເຂົ້າໃຈການເຮັດວຽກຂອງ CSS ຫຼາຍຂຶ້ນ ເພາະມັນມີຄວາມເປັນ Low-Level.

ສຸດທ້າຍນີ້, ຜູ້ຂຽນກໍຫວັງວ່າບົດຄວາມນີ້ຈະເປັນປະໂຫຍດຕໍ່ກັບຜູ້ອ່ານກໍຄືນັກພັດທະນາເວັບເຮົາບໍ່ຫຼາຍກໍໜ້ອຍ ໃນການເລືອກໃຊ້ເຄື່ອງມືທີ່ຕອບໂຈດຄວາມຕ້ອງການຂອງເຮົາ. ຖ້າຜູ້ອ່ານຜູ້ໃດຕ້ອງການສຶກສາກ່ຽວກັບການນໍາໃຊ້ Tailwind ຕື່ມກໍສາມາດເຂົ້າໄປທີ່ tailwindcss.com ໄດ້ເລີຍ.