tiktok นับยอดวิวยังไง

ในการเพิ่ม Tailwind CSS ใน Next.js คุณสามารถทำได้ดังนี้:

1. ติดตั้ง Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

2. สร้างไฟล์ tailwind.config.js

ไฟล์นี้จะใช้กำหนดค่า Tailwind CSS ของคุณ คุณสามารถตั้งค่าตัวเลือกต่าง ๆ เช่น การตั้งค่าสีและขนาดเริ่มต้นขององค์ประกอบ

module.exports = {
  // ตั้งค่าสีและขนาดเริ่มต้นขององค์ประกอบ
  theme: {
    extend: {
      colors: {
        primary: '#000000',
        secondary: '#ffffff',
      },
      sizes: {
        // ตั้งค่าขนาดตัวอักษรเริ่มต้นเป็น 16px
        font: 16,
      },
    },
  },

  // ตั้งค่าไลบรารี CSS อื่น ๆ ที่จะนำเข้า
  plugins: [],
};

3. นำเข้าไฟล์ tailwind.css

ไฟล์นี้จะใช้นำเข้า Tailwind CSS ลงในแอปพลิเคชันของคุณ

import 'tailwindcss/tailwind.css';

4. ใช้คลาส Tailwind CSS ในไฟล์ React component ของคุณ

คุณสามารถใช้คลาส Tailwind CSS ในไฟล์ React component ของคุณเพื่อกำหนดสไตล์ให้กับองค์ประกอบ

import React from 'react';
import styles from './styles.module.css';

const Button = () => {
  return (
    <button className={styles.my-button}>
      Click me!
    </button>
  );
};

export default Button;

ตัวอย่างเช่น ไฟล์ React component ต่อไปนี้จะใช้คลาส bg-primary จาก Tailwind CSS เพื่อตั้งค่าพื้นหลังของปุ่มเป็นสีดำ:

import React from 'react';
import styles from './styles.module.css';

const Button = () => {
  return (
    <button className={styles.my-button}>
      Click me!
    </button>
  );
};

export default Button;

เมื่อคุณ render ไฟล์ React component นี้ ปุ่มจะมีพื้นหลังสีดำ

นี่คือตัวอย่างเพิ่มเติมบางส่วนของการใช้คลาส Tailwind CSS:

• text-primary : ตั้งค่าสีของตัวอักษรเป็นสีดำ
• font-size-16 : ตั้งค่าขนาดตัวอักษรเป็น 16px
• rounded-lg : ตั้งค่ามุมของปุ่มเป็นมน
• flex : ตั้งค่าปุ่มให้จัดเรียงแบบ flex

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคลาส Tailwind CSS ได้จากเอกสารประกอบของ Tailwind CSS