ติดตั้ง Tailwind CSS ด้วย Nuxt

บทนำ: ทำไมต้อง Tailwind CSS กับ Nuxt?

Tailwind CSS และ Nuxt.js เป็นสองเครื่องมือที่ทรงพลังในโลกของการพัฒนาเว็บสมัยใหม่ Tailwind CSS นำเสนอแนวคิด Utility-First CSS ที่ช่วยให้คุณสร้าง UI ได้อย่างรวดเร็วโดยไม่ต้องออกจาก HTML ในขณะที่ Nuxt.js เป็น Framework ที่ยอดเยี่ยมสำหรับ Vue.js ที่ช่วยให้คุณสร้างแอปพลิเคชันแบบ Server-Side Rendering (SSR), Static Site Generation (SSG) และอื่นๆ ได้อย่างง่ายดาย การผสานรวมทั้งสองเข้าด้วยกันจะช่วยเร่งกระบวนการพัฒนาและเพิ่มความยืดหยุ่นในการออกแบบได้อย่างมหาศาล

บทความนี้จะนำคุณไปสู่ขั้นตอนการติดตั้ง Tailwind CSS ในโปรเจกต์ Nuxt (เวอร์ชัน 3) โดยใช้ Nuxt Tailwind CSS Module ซึ่งเป็นวิธีที่ง่ายและมีประสิทธิภาพที่สุด

สิ่งที่ต้องมี

• Node.js (เวอร์ชัน LTS แนะนำ)
• npm หรือ Yarn
• ความรู้พื้นฐานเกี่ยวกับ Nuxt.js และ Vue.js

ขั้นตอนที่ 1: สร้างโปรเจกต์ Nuxt ใหม่

เริ่มต้นด้วยการสร้างโปรเจกต์ Nuxt 3 โดยใช้คำสั่ง nuxi:

npx nuxi init my-nuxt-tailwind-app

จากนั้น เข้าสู่ไดเรกทอรีของโปรเจกต์และติดตั้ง Dependencies:

cd my-nuxt-tailwind-app npm install # หรือ yarn install / pnpm install

ขั้นตอนที่ 2: ติดตั้ง Nuxt Tailwind CSS Module

ใน Nuxt 3 การติดตั้ง Tailwind CSS ทำได้ง่ายมากด้วย Module เฉพาะสำหรับ Nuxt:

npm install -D @nuxtjs/tailwindcss

หลังจากติดตั้ง Module แล้ว คุณจะต้องเพิ่มมันเข้าไปในไฟล์ nuxt.config.ts ของคุณ:

// nuxt.config.ts export default defineNuxtConfig({ modules: [ '@nuxtjs/tailwindcss' ], // หากต้องการปรับแต่ง Tailwind เพิ่มเติม สามารถระบุที่นี่ได้เลย tailwindcss: { // configPath: '~/tailwind.config.js', // สามารถกำหนด path ของไฟล์ config ได้ // cssPath: '~/assets/css/tailwind.css', // สามารถกำหนด path ของไฟล์ CSS หลักได้ } }) 

เมื่อเพิ่ม Module เข้าไปแล้ว Nuxt จะจัดการที่เหลือให้เอง เช่น การสร้างไฟล์ tailwind.config.js และการรวม Tailwind เข้ากับ PostCSS ของโปรเจกต์

ขั้นตอนที่ 3: ปรับแต่ง Tailwind CSS (ไม่บังคับ)

Nuxt Tailwind CSS Module จะสร้างไฟล์ tailwind.config.js ให้โดยอัตโนมัติที่รูทของโปรเจกต์ (หากยังไม่มี) คุณสามารถแก้ไขไฟล์นี้เพื่อปรับแต่ง Theme, Colors, Fonts, Breakpoints หรือเพิ่ม Plugins ของ Tailwind ได้ตามต้องการ

// tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./components/**/*.{vue,js,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./plugins/**/*.{js,ts}", "./nuxt.config.{js,ts}", "./app.vue", ], theme: { extend: { // เพิ่มสีที่กำหนดเอง colors: { primary: '#3490dc', secondary: '#ffed4a', } }, }, plugins: [ // require('@tailwindcss/forms'), // ตัวอย่างการเพิ่ม Plugin ], } 

หากคุณต้องการมีไฟล์ CSS หลักสำหรับ Tailwind (เช่น เพื่อเพิ่ม @apply หรือ CSS พื้นฐานอื่นๆ) คุณสามารถสร้างไฟล์ ~/assets/css/tailwind.css และ Module จะรวมมันให้โดยอัตโนมัติ (หรือระบุ cssPath ใน nuxt.config.ts)

ขั้นตอนที่ 4: เริ่มใช้งาน Tailwind CSS

ตอนนี้คุณสามารถใช้คลาสของ Tailwind CSS ในไฟล์ Vue Components หรือ Pages ของคุณได้แล้ว ลองแก้ไขไฟล์ app.vue เพื่อดูผลลัพธ์:

<template> <div class="min-h-screen bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center p-4"> <div class="text-center p-8 bg-white rounded-xl shadow-2xl max-w-md w-full animate-fade-in-up"> <h1 class="text-4xl font-extrabold text-gray-900 mb-4 tracking-tight"> <span class="text-indigo-600">สวัสดี</span> Tailwind & Nuxt! </h1> <p class="text-lg text-gray-700 leading-relaxed mb-6"> การติดตั้งสำเร็จแล้ว! คุณพร้อมที่จะสร้างสรรค์ด้วย Utility-First CSS และ Framework ที่น่าทึ่งอย่าง Nuxt.js </p> <button class="bg-indigo-700 hover:bg-indigo-800 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-indigo-300 focus:ring-opacity-75" @click="alert('ยินดีต้อนรับสู่โลกของ Tailwind & Nuxt!')"> เริ่มสร้างเลย! </button> </div> </div> </template> <style> /* เพิ่มคีย์เฟรมสำหรับแอนิเมชัน */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; } </style> 

รัน Nuxt Development Server:

npm run dev

เปิดเบราว์เซอร์ไปที่ http://localhost:3000 เพื่อดูผลลัพธ์ คุณจะเห็นหน้าเว็บที่จัดรูปแบบด้วย Tailwind CSS อย่างสวยงาม

สรุป

การติดตั้ง Tailwind CSS ในโปรเจกต์ Nuxt.js นั้นทำได้ง่ายและรวดเร็วด้วยการใช้ Nuxt Tailwind CSS Module ด้วยการตั้งค่าเพียงไม่กี่ขั้นตอน คุณก็สามารถปลดล็อกพลังของ Utility-First CSS เพื่อสร้าง UI ที่สวยงามและตอบสนองได้อย่างรวดเร็ว ลองนำ Tailwind CSS ไปใช้ในโปรเจกต์ Nuxt ถัดไปของคุณดูสิ แล้วคุณจะพบว่าการพัฒนาเว็บไม่ใช่เรื่องยากอีกต่อไป ขอให้สนุกกับการโค้ดดิ้ง!