ສ້າງສີ Tailwind

ສ້າງພາເລັດ 11 ລະດັບ (50-950) ຂອງ Tailwind CSS ພ້ອມລະຫັດຕັ້ງຄ່າ ຈາກລະຫັດ Hex ພຽງ 1 ສີ

ຂໍ້ມູນອັບເດດເພີ່ມເຄື່ອງມືສ້າງສີ Tailwind, ສ້າງສີ 11 ລະດັບ ແລະ ລະຫັດການຕັ້ງຄ່າຈາກ 1 ສີເບິ່ງຂໍ້ມູນການອັບເດດ

ຈຸດເດັ່ນ

ສ້າງ 11 ລະດັບອັດຕະໂນມັດຈາກ 1 ສີ

ກຳນົດສີທີ່ໃສ່ເຂົ້າເປັນ 500 ແລ້ວຄິດໄລ່ຄວາມເຂັ້ມ-ຈາງຕັ້ງແຕ່ 50 ຫາ 950

ຮອງຮັບທັງຮູບແບບ v3 ແລະ v4

ສະຫຼັບລະຫວ່າງຮູບແບບການຂຽນ config ແລະ @theme ດ້ວຍແຖບແທັບ

ກັອບປີ້ Hex ຕາມແຕ່ລະລະດັບ

ກັອບປີ້ລະຫັດສີເທື່ອລະສີ ດ້ວຍປຸ່ມຂອງແຕ່ລະໂຕຢ່າງສີ

ອັບເດດພາເລັດພ້ອມກັບການປ້ອນຂໍ້ມູນ

ລອງປຽບທຽບສີໄດ້ໂດຍບໍ່ຕ້ອງກົດປຸ່ມດຳເນີນການ

ວິທີໃຊ້

ໃສ່ Hex ຂອງສີພື້ນຖານ

ໃສ່ລະຫັດ Hex ຫຼື ຄລິກທີ່ໂຕຢ່າງສີທາງຊ້າຍສຸດເພື່ອເລືອກດ້ວຍຕົວເລືອກສີ

ໃສ່ຊື່ສີຕາມຄວາມຕ້ອງການ

ໃສ່ຊື່ສີທີ່ຈະໃຊ້ໃນລະຫັດດ້ວຍຕົວອັກສອນພາສາອັງກິດໂຕນ້ອຍ. ຖ້າວ່າງໄວ້ຈະໃຊ້ primary

ກວດເບິ່ງໂຕຢ່າງສີ 11 ລະດັບ

ກວດເບິ່ງໂຕຢ່າງສີ ແລະ ລະຫັດ Hex ຕັ້ງແຕ່ 50 ຫາ 950 ແລະ ກັອບປີ້ເທື່ອລະສີດ້ວຍປຸ່ມກັອບປີ້ຂອງແຕ່ລະໂຕຢ່າງ

ເລືອກຮູບແບບແລ້ວກັອບປີ້

ເລືອກ v3 ຫຼື v4 ແລ້ວກົດ "ກັອບປີ້ລະຫັດ" ເພື່ອວາງໃສ່ tailwind.config.js ຫຼື ໄຟລ໌ CSS

ກໍລະນີການນຳໃຊ້

ສ້າງຄວາມເຂັ້ມ-ຈາງຂອງສີແບຣນ

ສ້າງຄວາມເຂັ້ມ-ຈາງທີ່ໃຊ້ສຳລັບ hover ປຸ່ມ ຫຼື ພື້ນຫຼັງ ຈາກສີແບຣນພຽງ 1 ສີ

ເພີ່ມສີທີ່ບໍ່ມີໃນພາເລັດມາດຕະຖານ

ເພີ່ມສີສະເພາະຂອງໂປຣເຈັກທີ່ບໍ່ມີໃນສີມາດຕະຖານຂອງ Tailwind ເປັນ 11 ລະດັບໃສ່ໄຟລ໌ຕັ້ງຄ່າ

ສ້າງການຕັ້ງຄ່າ @theme ຂອງ v4

ຂຽນຕົວແປ CSS ຂອງ Tailwind v4 ອອກມາຈາກສີຫຼັກຂອງເວັບໄຊທັງໝົດ

ກະກຽມການນຳໃຊ້ຈາກແບບຮ່າງອອກແບບ

ກະກຽມລະຫັດ 11 ລະດັບສຳລັບການນຳໃຊ້ຈາກສີທີ່ກຳນົດໃນແບບຮ່າງ ແລະ ຄັດລອກໃສ່ເຄື່ອງມືອອກແບບນຳ

ຄວາມຮູ້ພື້ນຖານ

ຄວາມໝາຍຂອງ 50-950 ໃນ Tailwind

ສີຂອງ Tailwind CSS ໃຊ້ຕົວເລກ 11 ລະດັບຕັ້ງແຕ່ 50 (ຈາງທີ່ສຸດ) ຫາ 950 (ເຂັ້ມທີ່ສຸດ) ເພື່ອສະແດງຄວາມສະຫວ່າງ ໂດຍ 500 ເປັນຄ່າພື້ນຖານຂອງສີນັ້ນ. ຕົວເລກຈະຖືກໃສ່ຕໍ່ທ້າຍຊື່ຄລາສ ເຊັ່ນ "bg-primary-500" ຫຼື "text-primary-700".

ລະດັບ 50-300：ລະດັບ 50-300 ເປັນສີອ່ອນທີ່ມັກໃຊ້ເປັນພື້ນຫຼັງ ຫຼື ການທາສີບາງໆ ເຊິ່ງອ່ານງ່າຍເມື່ອວາງຕົວໜັງສືສີເຂັ້ມທັບລົງໄປ.
ລະດັບ 600-950：ລະດັບ 600-950 ເປັນສີເຂັ້ມທີ່ມັກໃຊ້ຕອນ hover ປຸ່ມ ຫຼື ສີຕົວໜັງສືຫົວຂໍ້ ເຊິ່ງເຫັນໄດ້ຊັດເຈນເທິງພື້ນຫຼັງສີຂາວ.

ຄວາມແຕກຕ່າງຂອງວິທີກຳນົດສີລະຫວ່າງ v3 ແລະ v4

Tailwind CSS v3 ກຳນົດສີດ້ວຍ JavaScript ໃນ tailwind.config.js ສ່ວນ v4 ກຳນົດເປັນຕົວແປ CSS ຢູ່ພາຍໃນ @theme ຂອງໄຟລ໌ CSS. ບໍ່ວ່າຈະໃຊ້ວິທີໃດ ສີທີ່ກຳນົດແລ້ວຈະໃຊ້ຊື່ຄລາສດຽວກັນ ເຊັ່ນ "bg-primary-500" ໄດ້.

ວິທີຂຽນຂອງ v3：ວິທີຂຽນຂອງ v3 ແມ່ນການຂຽນຊື່ສີ ແລະ ລະດັບແບບຊ້ອນກັນພາຍໃນ theme.extend.colors ເຊັ່ນ "primary: { 500: '#3B82F6' }".
ວິທີຂຽນຂອງ v4：ວິທີຂຽນຂອງ v4 ແມ່ນການຂຽນຊື່ສີ ແລະ ລະດັບເປັນຊື່ຕົວແປທີ່ເຊື່ອມດ້ວຍຂີດ (hyphen) ພາຍໃນ @theme ເຊັ່ນ "--color-primary-500: #3B82F6;".