KaBlog Logo

Tailwind ສຳລັບການອອກແບບ Zero to Hero

ຂຽນຂື້ນເມື່ອ

Tailwind ສຳລັບການອອກແບບ Zero to Hero

ແນ່ນອນວ່າທ່ານສາມາດເຂົ້າໄປອ່ານໃນເວັບໄຊທ໌ຂອງ Tailwind ສຳລັບການຮຽນ, ແຕ່ນີ້ຂ້ອຍເອງຈະແນະນຳສິ່ງທີ່ຂ້ອຍພົບມາຫຼັງຈາກທີ່ນຳໃຊ້ Tailwind ມາຫຼາຍໆປີ.

Tailwind CSS ເປັນ CSS Framework ທີ່ຈະຊ່ວຍໃຫ້ນັກພັດທະນາສາມາດສ້າງ UI ໄດ້ຢ່າງວ່ອງໄວ ແລະ ສາມາດປັບແຕ່ງລາຍລະອຽດຕ່າງໆໄດ້ຢ່າງງ່າຍດາຍ.

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

ການນຳໃຊ້ Tailwind ບໍ່ແມ່ນບັນຫາຫຍັງຫຼາຍ ພຽງແຕ່ເອີ້ນໃຊ້ class name ເຂົ້າໃນ HTML Tags, ເຮົາກໍສາມາດໃຊ້ມັນໄດ້ແລ້ວ ຫຼື ເອີ້ນວ່າ Class Component

ຕົວຢ່າງ ວິທີການນຳໃຊ້ Tailwind CSS

ການຂຽນໂດຍໃຊ້ CSS
.box {
    width: 40px;
    height: 40px;
    background-color: black;
}

<div class="box"></div>
ຂຽນໂດຍ Tailwind CSS
<div class="w-10 h-10 bg-black"></div>

ຜົນລັບດຽວກັນ

ນອກຈາກນີ້ ເຮົາຍັງສາມາດຂຽນ Tailwind CSS ໃນຮູບແບບ Customize 

<div class="w-[40px] h-[40px] bg-[black]"></div>

ອະທິບາຍ

  • w-10, ມີຄວາມໝາຍວ່າ width: 10; ເຊີ່ງ 10 ໃນ Tailwind ຈະເທົ່າກັບ 2.5rem ຫຼື 40px;
  • h-10, ມີຄວາມໝາຍວ່າ height: 40px;
  • bg-black, ມີຄວາມໝາຍວ່າ background: black; (black ເປັນ Color Palette ຂອງ Tailwind)

ກໍລະນີ ຢາກຂຽນຄ່າເອງ

  • w-[40px], ມີຄວາມໝາຍວ່າ width: 40px;
  • h-[40px], ມີຄວາມໝາຍວ່າ height: 40px;
  • bg-[black], ມີຄວາມໝາຍວ່າ background: black;

ວິທີຈື່ຄ່າພວກນີ້ຂອງຂ້ອຍກໍຄື 1 = 4px;

ສິ່ງໃດທີ່ເຮັດໃຫ້ຂ້ອຍຫຼົງໄຫຼໃນ Tailwind CSS

ການຈັດສີ, Tailwind ຈະມີຈານສີ (Color Palette) ທີ່ຫຼາກຫຼາຍໃຫ້ພວກເຮົາສາມາກນຳໃຊ້ໄດ້ເລີຍ. (ພ້ອມກັນນັ້ນ ພວກ ເຮົາຍັງສາມາດສ້າງສີທີ່ເປັນເອກະລັກສຳລັບ Project ໄດ້)

ກໍລະນີ ຈາກໃຊ້ສີ Theme ຟ້າ

<div class="w-10 h-10 bg-indigo-50"></div>
<div class="w-10 h-10 bg-indigo-100"></div>
<div class="w-10 h-10 bg-indigo-200"></div>
<div class="w-10 h-10 bg-indigo-300"></div>
<div class="w-10 h-10 bg-indigo-400"></div>
<div class="w-10 h-10 bg-indigo-500"></div>
<div class="w-10 h-10 bg-indigo-600"></div>
<div class="w-10 h-10 bg-indigo-700"></div>
<div class="w-10 h-10 bg-indigo-800"></div>
<div class="w-10 h-10 bg-indigo-900"></div>
<div class="w-10 h-10 bg-indigo-950"></div>
ຜົນລັບ
50
#eff6ff
100
#dbeafe
200
#bfdbfe
300
#93c5fd
400
#60a5fa
500
#3b82f6
600
#2563eb
700
#1d4ed8
800
#1e40af
900
#1e3a8a
950
#172554

ເຄັດລັບ, ເກືອບທຸກຄ່າສີຈະເລີ່ມຈາກ 50 ແລະ ສຸດທີ 950. ເຊັ່ນ 50, 100, 200, ..., 950

ນຳໃຊ້ສີດຽວ, ຈານສີ Tailwind (Color Palette)

ກໍລະນີ ຢາກລອງອອກແບບໂດຍໃຊ້ Color Palette ຂອງ TailwindCSS (ສີ indigo ຢ່າງດຽວ)

<div class="bg-indigo-100 text-indigo-900 py-5">
    <div class="text-center">
        <h1 class="text-4xl font-bold mb-4">Tailwind CSS Design</h1>
        <p class="text-lg">Create beautiful designs with ease using Tailwind CSS.</p>
        <button class="bg-indigo-700 text-white px-4 py-2 mt-8 rounded-md">Get Started</button>
    </div>
</div>
ຜົນລັບ

Tailwind CSS Design

Create beautiful designs with ease using Tailwind CSS.

ພຽງສີດຽວ ເຮົາສາມາດສ້າງ UI ທີ່ສວຍງາມໄດ້

ສຳລັບການຕິດຕັ້ງ

ການຕິດຕັ້ງ ຫຼື ນຳໃຊ້ມີຫຼາຍຮູບແບບ, ແຕ່ສຳລັບການຝຶກຂຽນໃຫມ່. ຂ້ອຍແນະນຳ ການໃຊ້ Play CDN, ແລະ Tailwind CLI

ກໍລະນີ ນຳໃຊ້ Play CDN
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

ເພີ່ມ tag script ນີ້ເຂົ້າໃນ HTML ກໍສາມາດນຳໃຊ້ໄດ້ເລີຍ

ກໍລະນີ ນຳໃຊ້ Tailwind CLI

ຂ້ອຍແນະນຳເຮັດຕາມ Documentation ຂອງ Tailwind ເລີຍ, ແຕ່ຕ້ອງເຮັດຕາມຂັ້ນຕອນທຸກຢ່າງ

ຄຳແນະນຳ

ສຳລັບຂ້ອຍການອ່ານ Office Documentation ຈະເປັນການດີທີ່ສຸດ ແຕ່ຂ້ອຍຈະມາແນະນຳ keywords ສຳຄັນໆ ແລະ ໃຊ້ປະຈຳໃຫ້ທ່ານ

  • Sizing
    Width ແລະ Height
    • w-{number}, ກຳນົດລວງກວ້າງ
    • w-{fraction}, ກຳນົດລວງກວ້າງຕາມອັດຕາສ່ວນຂອງໜ້າຈໍ, ເຊັ່ນ w-1/2, w-2/5
    • min-w-{number}, ກຳນົດລວງກວ້າງນ້ອຍສຸດ
    • max-w-{number}, ກຳນົດລວງກວ້າງສູງສຸດ
    • w-screen, ກຳນົດລວງກວ້າງເທົ່າກັບຄວາມກວ້າງຂອງ Browser
    • ສຳລັບ Height, ໃຊ້ວິທີດຽວກັນກັບ h, ພຽງແຕ່ປ່ຽນ w ເປັນ h
  • Spacing
    Padding ແລະ Margin
    • ສຳລັບ padding, p{t|r|b|l}-{size}
      ຕົວຢ່າງ
      • p-5, ເທົ່າກັບ padding: 20px;
      • pl-5, ເທົ່າກັບ padding-left: 20px;
      • pr-5, ເທົ່າກັບ padding-right: 20px;
      • pt-5, ເທົ່າກັບ padding-top: 20px;
      • pb-5, ເທົ່າກັບ padding-bottom: 20px;
      • py-5, ຄວາມໝາຍຄື padding ແກນ y, ກໍຄື padding top ແລະ padding bottom
      • px-5, ຄວາມໝາຍຄື padding ແກນ x
    • ສຳລັບ margin ກໍເຊັ່ນດຽວກັນກັບ padding
    • ໂຕສຸດທ້າຍທີ່ຢາກໃຫ້ໄດ້ນຳໃຊ້ກໍຄື Space Between, space-y-2, space-x-2
  • Typography ການຈັດການຕົວອັກສອນ
    Font Size, Font Weight, Line Clamp, Text Align, Text Color, Text Decoration
    • text-{size}, ກຳນົດຂະໜາດຂອງຕົວອັກສອນ
      ເຊັ່ນ
      • text-xs, Text Extra Small
      • text-sm, Text Small
      • text-base, Text Base
      • text-lg, Text Lage
      • text-xl, Text Extra Large
      • text-2xl ຈົນເຖີງ text-9xl, Text Small
    • font-{weight}, ກຳນົດຄວາມໜາຂອງຕົວອັກສອນ
      ເຊັ່ນ
      • font-thin
      • font-extralight
      • font-light
      • font-normal
      • font-medium
      • font-bold
      • font-black
    • line-clamp-{number}, ກຳນົດສູງສຸດຈຳນວນແຖວທີ່ຕ້ອງການສະແດງ
      ເຊັ່ນ
      • line-clamp-1
      • line-clamp-2
      • line-clamp-3
      • line-clamp-4
      • line-clamp-5
      • line-clamp-6
    • text-{align}, ກຳນົດການຈັດຕຳແໜ່ງຕົວອັກສອນ
      ເຊັ່ນ
      • text-left
      • text-center
      • text-right
      • text-justify
      • text-start
      • text-end
    • text-{color}, ກຳນົດສີໃຫ້ຕົວອັກສອນ
      ເຊັ່ນ
      • text-indigo-500
      • text-white
      • text-[#fff]
      • text-[rgba(0,0,0,0.2)]
    • text-{decoration}, ການປະດັບຕົວອັກສອນເຊັ່ນ unliner, line throuh,
      ເຊັ່ນ
      • underline
      • overline
      • line-through
      • no-underline
  • Backgrounds
    Background Color
    • bg-{color}, ກຳນົດສີພື້ນຖານ
      ເຊັ່ນ ວິທີນຳໃຊ້ຄືກັນກັບ text-color
  • Border
    Radius, Width, Color
    • rounded-{size}, ກຳນົດຄວາມກົມຂອງຂອບ
      ເຊັ່ນ
      • rounded-none
      • rounded-sm
      • rounded
      • rounded-md, (ຄ່າພວກນີ້ມີຄວາມຄືກັບຄ່າຕົວອື່ນໆເຊັ່ນ sm, md, lg, xl, ...)
      • rounded-full, ເປັນວົງມົນ
      ນອກຈາກນີ້ ຍັງສາມາດກຳນົດໄດ້ສະເພາະມຸມໃດມຸມນັ້ນ
      • rounded-{t|r|b|l}-{size}, top right bottom left
    • border-{size}, ກຳນົດຂະຫນາດເສັ້ນຂອບ
      ເຊັ່ນ
      • border-0
      • border-2
      • border-[2px]
      ນອກຈາກນີ້ ຍັງສາມາດກຳນົດໄດ້ສະເພາະມຸມໃດມຸມນັ້ນ
      • border-{t|r|b|l}-{size}, top right bottom left
    • border-{color}, ກຳນົດສີຂອງເສັ້ນຂອບ, ວິທີນຳໃຊ້ຄືກັນກັບ text-color
  • Effects
    Box Shadow ແລະ Opacity
    • Box Shadow, ກຳນົດເງົາໃຫ້ແກ່ element
      • shadow-sm
      • shadow
      • shadow-md
      • shadow-lg
      • shadow-xl
      • shadow-2xl

ຜູ້ຂຽນ: Kayengxiong Tongsuatong

@Facebook