การใช้งานกับ JavaScript Frameworks (React, Vue, Angular)

การใช้งาน Tailwind CSS กับ JavaScript Frameworks (React, Vue, Angular)

Tailwind CSS เป็น utility-first CSS framework ที่ได้รับความนิยมอย่างมาก ด้วยความสามารถในการปรับแต่งรูปลักษณ์ของเว็บไซต์ได้อย่างรวดเร็วและง่ายดาย การใช้งาน Tailwind CSS ร่วมกับ JavaScript frameworks เช่น React, Vue, และ Angular ช่วยให้การพัฒนา UI เป็นไปอย่างมีประสิทธิภาพและสอดคล้องกับ design system ของคุณ

ในบทความนี้ เราจะมาเรียนรู้วิธีการ integration Tailwind CSS กับ JavaScript frameworks เหล่านี้ รวมถึงเทคนิคต่างๆ ที่ช่วยให้การใช้งาน Tailwind CSS ใน frameworks เหล่านี้เป็นไปอย่างราบรื่น

การตั้งค่า Environment

ก่อนที่จะเริ่มใช้งาน Tailwind CSS กับ JavaScript framework ใดๆ เราจำเป็นต้องตั้งค่า environment ให้ถูกต้องเสียก่อน โดยทั่วไปแล้ว ขั้นตอนการตั้งค่าจะคล้ายคลึงกันในแต่ละ framework แต่ก็มีรายละเอียดที่แตกต่างกันเล็กน้อย

React

สำหรับ React เราสามารถใช้ Create React App (CRA) เพื่อสร้าง project ใหม่ได้อย่างง่ายดาย จากนั้นติดตั้ง Tailwind CSS, PostCSS, และ Autoprefixer โดยใช้ npm หรือ yarn:

npx create-react-app my-react-app
cd my-react-app
npm install -D tailwindcss postcss autoprefixer

จากนั้นสร้างไฟล์ tailwind.config.js และ postcss.config.js ใน root directory ของ project:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

เพิ่ม Tailwind directives ลงในไฟล์ ./src/index.css:

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

สุดท้าย import ไฟล์ ./src/index.css ใน ./src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Vue

สำหรับ Vue เราสามารถใช้ Vue CLI เพื่อสร้าง project ใหม่ได้ จากนั้นติดตั้ง Tailwind CSS, PostCSS, และ Autoprefixer เช่นเดียวกับ React:

vue create my-vue-app
cd my-vue-app
npm install -D tailwindcss postcss autoprefixer

สร้างไฟล์ tailwind.config.js และ postcss.config.js ใน root directory ของ project (เช่นเดียวกับ React):

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

เพิ่ม Tailwind directives ลงในไฟล์ ./src/assets/main.css (หรือไฟล์ CSS หลักของคุณ):

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

Import ไฟล์ ./src/assets/main.css ใน ./src/main.js:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'

createApp(App).mount('#app')

Angular

สำหรับ Angular เราสามารถใช้ Angular CLI เพื่อสร้าง project ใหม่ได้ จากนั้นติดตั้ง Tailwind CSS, PostCSS, และ Autoprefixer:

ng new my-angular-app
cd my-angular-app
npm install -D tailwindcss postcss autoprefixer

สร้างไฟล์ tailwind.config.js และ postcss.config.js ใน root directory ของ project (เช่นเดียวกับ React และ Vue):

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

เพิ่ม Tailwind directives ลงในไฟล์ ./src/styles.css:

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

เพิ่มไฟล์ ./src/styles.css ใน angular.json:

"styles": [
  "src/styles.css"
]

การใช้งาน Classnames

เมื่อ environment ถูกตั้งค่าเรียบร้อยแล้ว เราสามารถเริ่มใช้งาน Tailwind CSS classes ใน components ของเราได้โดยตรง อย่างไรก็ตาม การจัดการ class names ที่ซับซ้อนอาจเป็นเรื่องยาก ในกรณีนี้ เราสามารถใช้ library เช่น classnames หรือ clsx เพื่อช่วยในการจัดการ class names ได้อย่างมีประสิทธิภาพ

ติดตั้ง classnames:

npm install classnames

ตัวอย่างการใช้งาน classnames ใน React:

import React from 'react';
import classNames from 'classnames';

function MyComponent({ isActive }) {
  const buttonClasses = classNames({
    'bg-blue-500': true,
    'hover:bg-blue-700': true,
    'text-white': true,
    'font-bold': true,
    'py-2': true,
    'px-4': true,
    'rounded': true,
    'opacity-50 cursor-not-allowed': !isActive,
    'opacity-100 cursor-pointer': isActive,
  });

  return (
    <button className={buttonClasses} disabled={!isActive}>
      Click me
    </button>
  );
}

export default MyComponent;

ในตัวอย่างนี้ classNames จะรวม class names ที่มีค่าเป็น true เข้าด้วยกัน ทำให้เราสามารถกำหนด class names ตามเงื่อนไขได้อย่างง่ายดาย

การจัดการ Dynamic Classes

การจัดการ dynamic classes เป็นสิ่งสำคัญในการสร้าง UI ที่มีความยืดหยุ่น Tailwind CSS มีวิธีจัดการ dynamic classes หลายวิธี หนึ่งในวิธีที่ง่ายที่สุดคือการใช้ template literals:

function MyComponent({ size }) {
  const padding = size === 'sm' ? 'p-2' : size === 'lg' ? 'p-4' : 'p-3';

  return (
    <div className={`bg-gray-100 rounded-md ${padding}`}>
      This is a box with dynamic padding.
    </div>
  );
}

ในตัวอย่างนี้ เรากำหนด padding ของ div โดยอิงตามค่าของ size prop

อีกวิธีหนึ่งคือการใช้ ternary operator:

function MyComponent({ isVisible }) {
  return (
    <div className={isVisible ? 'block' : 'hidden'}>
      This content is conditionally visible.
    </div>
  );
}

ในตัวอย่างนี้ เราแสดงหรือซ่อน div โดยอิงตามค่าของ isVisible prop

การใช้ classnames ร่วมกับ dynamic classes ทำให้เราสามารถจัดการ class names ที่ซับซ้อนได้อย่างมีประสิทธิภาพมากขึ้น:

import classNames from 'classnames';

function MyComponent({ color, size }) {
  const containerClasses = classNames(
    'rounded-md',
    {
      'bg-red-500': color === 'red',
      'bg-green-500': color === 'green',
      'bg-blue-500': color === 'blue',
    },
    size === 'sm' ? 'p-2' : size === 'lg' ? 'p-4' : 'p-3'
  );

  return (
    <div className={containerClasses}>
      This is a dynamically styled box.
    </div>
  );
}

ในตัวอย่างนี้ เรากำหนด background color และ padding ของ div โดยอิงตามค่าของ color และ size props

สรุป

การใช้งาน Tailwind CSS ร่วมกับ JavaScript frameworks เป็นวิธีที่มีประสิทธิภาพในการพัฒนา UI ที่สวยงามและ maintainable การตั้งค่า environment ที่ถูกต้อง การใช้ classnames เพื่อจัดการ class names ที่ซับซ้อน และการจัดการ dynamic classes อย่างมีประสิทธิภาพ เป็นสิ่งสำคัญที่ช่วยให้การใช้งาน Tailwind CSS ใน frameworks เหล่านี้เป็นไปอย่างราบรื่น