บทที่ 2: เริ่มต้นใช้งาน Tailwind CSS

การติดตั้ง Tailwind CSS

ก่อนที่คุณจะเริ่มต้นใช้งาน Tailwind CSS คุณต้องติดตั้งและตั้งค่าให้พร้อมใช้งาน ซึ่งมีหลายวิธีที่คุณสามารถเลือกใช้ได้ ขึ้นอยู่กับโครงสร้างโปรเจกต์ของคุณ เราจะเริ่มจากวิธีที่ได้รับความนิยมมากที่สุด

1. การติดตั้งผ่าน npm

วิธีนี้เหมาะสำหรับโปรเจกต์ที่ใช้ Node.js และต้องการควบคุมการตั้งค่า Tailwind CSS ได้อย่างเต็มที่

ขั้นตอน:

ติดตั้ง Node.js และ npm
หากยังไม่มี Node.js ให้ดาวน์โหลดและติดตั้งได้จาก Node.js Official Website

สร้างโปรเจกต์ใหม่ (ถ้ายังไม่มี)
รันคำสั่งใน Terminal หรือ Command Prompt:

mkdir my-tailwind-project
cd my-tailwind-project
npm init -y

ติดตั้ง Tailwind CSS ใช้คำสั่ง:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

คำสั่งนี้จะสร้างไฟล์ tailwind.config.js สำหรับตั้งค่าต่าง ๆ ในโปรเจกต์ของคุณ

ตั้งค่าไฟล์ CSS
สร้างไฟล์ src/input.css แล้วเพิ่มโค้ดต่อไปนี้:

@tailwind base;
@tailwind components;
@tailwind utilities;

เพิ่ม Script สำหรับ Build CSS
ในไฟล์ package.json เพิ่มคำสั่งในส่วน scripts:

"scripts": {
  "build": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
}

รันคำสั่ง Build CSS
ใช้คำสั่ง: npm run build จะได้ไฟล์ dist/output.css ซึ่งมีโค้ด CSS ที่พร้อมใช้งาน

npm run build

2. การติดตั้งผ่าน CDN

หากคุณต้องการทดลองใช้งาน Tailwind CSS อย่างรวดเร็วโดยไม่ต้องติดตั้ง คุณสามารถใช้ CDN ได้

ขั้นตอน:

เพิ่มโค้ดต่อไปนี้ใน <head> ของไฟล์ HTML:

<script src="https://cdn.tailwindcss.com"></script>

คุณสามารถเริ่มต้นเขียนโค้ดได้ทันที ตัวอย่าง:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Tailwind CSS</title>
</head>
<body class="bg-gray-100 p-6">
  <h1 class="text-3xl font-bold text-center text-blue-600">Hello, Tailwind CSS!</h1>
</body>
</html>

ข้อดีของวิธีนี้คือความรวดเร็วและง่ายต่อการเริ่มต้น แต่มีข้อจำกัดในการปรับแต่ง Custom Configurations

3. การใช้งานผ่าน Framework เช่น Next.js หรือ Laravel

Tailwind CSS รองรับ Framework หลายตัว เช่น Next.js, Laravel, Vue.js หากคุณใช้ Framework เหล่านี้ คุณสามารถติดตั้ง Tailwind CSS ตามเอกสารของ Framework นั้น ๆ ตัวอย่างเช่น:

สำหรับ Next.js:

ติดตั้ง Tailwind CSS: npx create-next-app@latest my-next-tailwind cd my-next-tailwind npm install -D tailwindcss postcss autoprefixer npx tailwindcss init

ตั้งค่าไฟล์ CSS และ Config
ทำตามขั้นตอนการตั้งค่าที่คล้ายกับวิธีติดตั้งผ่าน npm

การตั้งค่าไฟล์ tailwind.config.js

ไฟล์ tailwind.config.js เป็นจุดที่คุณสามารถปรับแต่ง Tailwind CSS ให้เหมาะกับโปรเจกต์ของคุณ ตัวอย่างเช่น การเพิ่มสี ฟอนต์ หรือ Breakpoints

module.exports = {
  content: ["./src/**/*.{html,js}"], // ระบุไฟล์ที่ Tailwind ต้องใช้งาน
  theme: {
    extend: {
      colors: {
        customBlue: '#1E40AF',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
  plugins: [],
};

ทดสอบการใช้งาน

หลังจากติดตั้ง Tailwind CSS สำเร็จ ลองทดสอบการใช้งานด้วยตัวอย่างง่าย ๆ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./dist/output.css" rel="stylesheet">
  <title>My Tailwind Project</title>
</head>
<body class="bg-gray-200 p-4">
  <h1 class="text-2xl font-bold text-blue-500">Welcome to Tailwind CSS!</h1>
  <p class="text-lg text-gray-700 mt-2">นี่คือตัวอย่างการใช้งาน Tailwind CSS</p>
</body>
</html>

สรุป

ในบทนี้เราได้เรียนรู้วิธีติดตั้ง Tailwind CSS และการตั้งค่าเบื้องต้น คุณสามารถเลือกวิธีที่เหมาะสมกับโปรเจกต์ของคุณ ไม่ว่าจะเป็นการใช้ npm สำหรับโปรเจกต์ที่ซับซ้อนหรือ CDN สำหรับการทดลองใช้งาน ในบทถัดไป เราจะมาทำความเข้าใจกับ Utility Classes ซึ่งเป็นหัวใจสำคัญของ Tailwind CSS!