Laravel: Tailwind CSS, Vite

โดยปกติ laravel 11 จะมาพร้อมกับ Bootstrap ถ้าต้องการใช้ Tailwind CSS เพื่อที่จะใช้ style ที่ยืดหยุ่นกว่า สามารถทำได้โดยมีขั้นตอน แต่เพราะว่ามี Vite อยู่ในขั้นตอน ทำให้ต้องทำตามขั้นตอนที่แน่นอน

1. ติดตั้งโดย command
   npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
2. เปิดไฟล์ SourceCode/resources/css/app.css
   • import ‘../css/app.css’; ให้ comment หรือลบ Bootstrap ถ้าไม่ใช้
   • เพิ่ม code

     /* Tailwind CSS */
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     

3. ให้แน่ใจว่า page ที่เปิดอยู่มี view ที่เรียกใช้
   @vite([‘resources/css/app.css’])
   หรือ
   @vite([‘resources/css/app.css’, ‘resources/js/app.ts’])
   แน่นอน ไม่ใช่ อยู่ในเงื่อนไขที่ไม่ทำงาน เช่น
   @if (file_exists(public_path(‘build/manifest.json’)) || file_exists(public_path(‘hot’)))
   @vite([‘resources/css/app.css’, ‘resources/js/app.ts’])
   @else
4. ใช้ Tailwind CSS ในหน้าที่เปิดอยู่ เช่น

   <div class="text-red-500">Test</div>
   

5. ลบ cache ใน node_modules/.vite โดย command
   rm -rf node_modules/.vite
6. ติดตั้งโดย command
   npm run dev
7. test ว่า css ทำงานมั๋ย

สาเหตุที่ต้องทำตามลำดับเพราะว่า vite จะไม่นำ Tailwind CSS เข้ามารวมใน SourceCode/public/build/assets/*.css เพราะว่ามันไม่เจอการเรียกใช้ จึงไม่เอามารวมให้ไฟล์มันใหญ่ ฉลาดเกินไป T_T