👉 DaisyUI เป็น component library สำหรับ Tailwind CSS โดยมีจุดประสงค์เพื่อช่วยนักพัฒนาเว็บสร้างเว็บไซต์และแอปพลิเคชันได้รวดเร็วและง่ายขึ้น และอ่านง่ายขึ้น

จากเดิมที่เรา tailwindCSS แบบ utility class ทุก element ถึงแม้ว่าจะอ่านชื่อ class names ได้ง่ายแต่เมื่อเราเขียน code เยอะขึ้น ทำให้อ่าน code ยาก ทาง DaisyUI เขาเกิดมาเพื่อช่วยลดปัญหา Thousands of class names ให้เหลือน้อยลง และอ่านง่ายขึ้น (concept เดียวกับ bootstrap เลย)

DaisyUI ได้เตรียม basic common component มาให้แล้ว เช่น

• -

  Navbar, Button, Form, Accordion, Alert, Hero section และอื่นๆอีกมากมาย

• -

  มี Theme ต่างๆให้เลือกใช้งาน

• -

  แต่ถ้าหากไม่พอใจ ก็สามารถเขียน tailwindCSS เพิ่มเติมเองได้ด้วยเช่นกัน

All daisyUi components

DaisyUI themes

ติดตั้ง DaisyUI

✅ จำเป็นต้องติดตั้ง node และ tailwindCSS มาก่อนนะ

npm i -D daisyui@latest หรือ yarn add -D daisyui@latest

เพิ่ม code ด้านล่างนี้ ไปใน tailwind.config.js


module.exports = {
  //...
  plugins: [require("daisyui")],
}

มาดูตัวอย่าง code แบบ tailwindCSS ปกติ

   <div className="flex justify-center items-center min-h-screen w-screen bg-base-200">
        <div className="flex justify-center items-center gap-1 p-1 max-w-[80%] text-center">
          <div className="max-w-2xl">
            <h1 className="text-5xl font-bold">Hello World!</h1>
            <p className="py-6">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut
            </p>
            <button className="bg-gray-900 px-5 py-3 h-16 w-[16rem]  text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95 ">
              Get Started
            </button>
          </div>
        </div>
      </div>

hero section with tailwindCSS without using daisyUI

ตัวอย่าง code แบบใช้ DaisyUI + tailwindCSS

 <div className="hero min-h-screen bg-base-200">
      <div className="hero-content text-center">
        <div className="max-w-2xl">
          <h1 className="text-5xl font-bold">Hello World!</h1>
          <p className="py-6">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut{" "}
          </p>
          <button className="btn btn-neutral md:btn-lg md:btn-wide group px-12">
            Get Started
          </button>
        </div>
      </div>
 </div>

hero section with tailwindCSS with using daisyUI

จะเห็นว่าการใช้ DaisyUI ช่วยให้ Code สั้นลงมาก

😄 ข้อดีของ DaisyUI:

• -

  ข่วยให้ Coding ฝั่ง frontend ได้ไวขึ้น

• -

  CSS Class name สั้นลงมาก

• -

  ทำให้เว็บออกมาสวย มี Theme ให้เลือกเยอะ

🤫 ข้อพิจารณาของ DaisyUI:

• -

  จำเป็นต้องเข้าใจการใช้งาน CSS Properties และใช้งาน TailwindCSS เป็นอย่างดีก่อนจึงจะสามารถใช้งาน DaisyUI

แหล่งที่มา

DaisyUI website: https://daisyui.com/