Guide สำหรับติดตั้ง Tailwind x Vite + React#

สำหรับคนที่ใช้ Framework อื่นที่ไม่ใช่ Vite + React สามารถเข้าไปดูเพิ่มเติมได้ที่ Tailwind

Tailwind Setup

• สร้างโปรเจคก่อนเลย (มีแล้วข้ามเลย) Start by creating a new Vite project if you don’t have one set up already. The most common approach is to use Create Vite.

  npm create vite@latest my-project -- --template react
  cd my-project
  

ติดตั้ง Tailwind#

1. Install Tailwind CSS

   Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files.

   Terminal

   npm install -D tailwindcss postcss autoprefixer
   

   npx tailwindcss init -p
   

2. Configure your template paths

   Add the paths to all of your template files in your tailwind.config.js file.

   tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   export default {
     content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   };
   

3. Add the Tailwind directives to your CSS

   Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

   index.css

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

4. Start your build process

   Run your build process with npm run dev.

   Terminal

   npm run dev
   

5. Start using Tailwind in your project Start using Tailwind’s utility classes to style your content.

   App.jsx

   export default function App() {
       return (
           <h1 className="text-3xl font-bold underline">
               Hello world!
           </h1>
       )
   }