การใช้ Tailwind CSS ร่วมกับ Gatsby

การใช้ Tailwind CSS ร่วมกับ Gatsby

ในบทความนี้ เราจะมาเรียนรู้วิธีการติดตั้งและใช้งาน Tailwind CSS ร่วมกับ Gatsby ซึ่งเป็น Static Site Generator (SSG) ที่ได้รับความนิยม Gatsby ช่วยให้เราสร้างเว็บไซต์ที่รวดเร็วและมีประสิทธิภาพ ในขณะที่ Tailwind CSS ช่วยให้เราออกแบบ UI ได้อย่างรวดเร็วและง่ายดาย

บทความนี้จะครอบคลุมขั้นตอนการติดตั้ง, การ configure, และการใช้งาน Tailwind CSS ใน components ต่างๆ ของ Gatsby project

ทำไมต้องใช้ Tailwind CSS กับ Gatsby?

• ความเร็วในการพัฒนา: Tailwind CSS ช่วยให้คุณสร้าง UI ได้อย่างรวดเร็วโดยไม่ต้องเขียน CSS เองทั้งหมด
• ปรับแต่งได้ง่าย: คุณสามารถปรับแต่ง Tailwind CSS ได้อย่างละเอียดเพื่อให้เข้ากับ Design System ของคุณ
• ประสิทธิภาพ: Tailwind CSS สามารถกำจัด CSS ที่ไม่ได้ใช้ออกไปได้ ทำให้ไฟล์ CSS มีขนาดเล็กลงและเว็บไซต์โหลดเร็วขึ้น
• Static Site Generation: Gatsby สร้างเว็บไซต์ที่เป็น static HTML ซึ่งสามารถนำไป deploy ได้ง่ายและมีประสิทธิภาพสูง

ข้อกำหนดเบื้องต้น

ก่อนเริ่มต้น คุณจะต้องมีสิ่งต่อไปนี้:

• Node.js และ npm (หรือ yarn) ติดตั้งอยู่ในเครื่องของคุณ
• ความเข้าใจพื้นฐานเกี่ยวกับ React และ Gatsby

ขั้นตอนการติดตั้ง

เริ่มต้นด้วยการสร้าง Gatsby project ใหม่:

gatsby new gatsby-tailwind-project
cd gatsby-tailwind-project

จากนั้น ติดตั้ง Tailwind CSS, PostCSS, และ Autoprefixer:

npm install -D tailwindcss postcss autoprefixer

หรือใช้ yarn:

yarn add -D tailwindcss postcss autoprefixer

การ Configure

1. **สร้างไฟล์ `tailwind.config.js`:**

สร้างไฟล์ `tailwind.config.js` ใน root directory ของ project ของคุณ:

npx tailwindcss init -p

ไฟล์ `tailwind.config.js` จะมีลักษณะดังนี้:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. **สร้างไฟล์ `postcss.config.js`:**

สร้างไฟล์ `postcss.config.js` ใน root directory ของ project ของคุณ:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. **เพิ่ม Tailwind directives ไปยังไฟล์ CSS:**

สร้างไฟล์ CSS หลัก (เช่น `src/styles/global.css`) และเพิ่ม Tailwind directives:

/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. **Import ไฟล์ CSS หลักใน `gatsby-browser.js`:**

สร้างหรือแก้ไขไฟล์ `gatsby-browser.js` ใน root directory ของ project ของคุณ และ import ไฟล์ CSS หลัก:

// gatsby-browser.js
import "./src/styles/global.css"

การใช้งานใน Components

ตอนนี้คุณสามารถเริ่มใช้งาน Tailwind CSS classes ใน components ของคุณได้แล้ว

ตัวอย่าง:

// src/pages/index.js
import React from "react"

const IndexPage = () => {
  return (
    <main className="bg-gray-100 min-h-screen flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-md text-center">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">
          Hello Gatsby with Tailwind CSS!
        </h1>
        <p className="text-gray-600">
          This is a simple example using Tailwind CSS in a Gatsby project.
        </p>
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
          Learn More
        </button>
      </div>
    </main>
  )
}

export default IndexPage

ในตัวอย่างนี้ เราใช้ Tailwind CSS classes เพื่อกำหนด style ให้กับ `<main>`, `<div>`, `<h1>`, `<p>`, และ `<button>` elements

การปรับแต่ง Tailwind Configuration

คุณสามารถปรับแต่ง Tailwind CSS ได้โดยการแก้ไขไฟล์ `tailwind.config.js`

ตัวอย่าง:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'custom-blue': '#1e3a8a', // indigo-800
      },
      fontFamily: {
        'sans': ['"Helvetica Neue"', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

ในตัวอย่างนี้ เราได้เพิ่มสีใหม่ชื่อ `custom-blue` และเปลี่ยน font default เป็น Helvetica Neue

คุณสามารถใช้สีใหม่นี้ใน components ของคุณได้ดังนี้:

<button className="bg-custom-blue hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
  Learn More
</button>

การใช้งาน Variants

Tailwind CSS มี variants ที่ช่วยให้คุณกำหนด style ตามเงื่อนไขต่างๆ เช่น `:hover`, `:focus`, `:active`, และ breakpoints ต่างๆ

ตัวอย่าง:

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
  Learn More
</button>

ในตัวอย่างนี้ เราใช้ `hover:bg-blue-700` เพื่อเปลี่ยนสีพื้นหลังเมื่อ hover, และ `focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50` เพื่อกำหนด style เมื่อ focus

การ Build และ Deploy

เมื่อคุณพัฒนาเว็บไซต์เสร็จแล้ว คุณสามารถ build และ deploy ได้ดังนี้:

gatsby build

คำสั่งนี้จะสร้าง static files ใน directory `public` ซึ่งคุณสามารถนำไป deploy บน platform ต่างๆ เช่น Netlify, Vercel, หรือ AWS S3

สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการติดตั้งและใช้งาน Tailwind CSS ร่วมกับ Gatsby ซึ่งช่วยให้เราสร้างเว็บไซต์ที่สวยงามและมีประสิทธิภาพได้อย่างรวดเร็วและง่ายดาย

ในบทความถัดไป เราจะเรียนรู้เกี่ยวกับการใช้งาน Arbitrary Values ใน Tailwind CSS