เพียง 1 คำสั่งเท่านั้นก็เริ่มใช้งาน Tailwind CSS ได้ง่ายๆ

ช่วงนี้ css framework ที่มาแรงคงหนีไม่พ้น Tailwind CSS ใครยังไม่ได้ไปลองได้แล้ว เพราะเริ่มมีการนำมาใช้งานกับ Production มากขึ้นเรื่อยๆ ทีมผมก็เช่นกันถ้ามีโปรเจ็คไหนที่ต้องพัฒนาหน้าเว็บไซต์ ก็จะเรียกใช้ Tailwind CSS เลยทันที แทน Bootstrap แล้ว

ซึ่งตัว Tailwild CSS นั้น เราสามารถนำไปใช้กับ Next.js, React.js, Vue3 หรือ Laravel แต่การที่เราต้องมาตั้งค่าแต่ละ framework นั้นก็เสียเวลาซะเหลือเกิน

วันนี้ผมเลยจะมาเสนอเพียง 1 คำสั่ง เราก็จะได้ JS framework + Tailwind CSS มาใช้งานได้เลยทันที

$ npx new-tailwind-app@latest

มาดูหน่อยว่ามันรองรับ js framework อะไรบ้าง

$ npx new-tailwind-app@latest --help                                                                   
npx: installed 151 in 11.169s

  Set up a tailwind app with `npx new-tailwind-app`

   USAGE

  $ new-tailwind-app <command> [option]

   COMMANDS

  name  Name of the tailwind app

   OPTIONS

  -b, --basic    Generates boilerplate of a basic Tailwind app with HTML & CSS
  -n, --next     Generates boilerplate of a Next.js Tailwind app
  -r, --react    Generates boilerplate of a React.js Tailwind app
  -g, --gatsby   Generates boilerplate of a Gatsby.js Tailwind app
  -v, --vue3     Generates boilerplate of a vue3 Tailwind app
  -l, --laravel  Generates boilerplate of a laravel Tailwind app

วิธีใช้งาน

$ npx new-tailwind-app [app_name] --next

ด้วยคำสั่งด้านบนมันก็จะสร้าง Next.js + Tailwind CSS มาให้แล้ว อยากได้ตัวอื่นก็เปลี่ยน --next ไปเป็น --react หรือ --vue3 ตามสบาย...

หากชอบก็อย่าลืมไปกดดาวที่ new-tailwind-app github ได้นะ