vite.js v 5.2.0 폴더 구조

- assets 폴더에는 react.svg 로고 하나 있음

//root 의 package.json

{
  "name": "basic20240515",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

 

Vite.js + Tailwindcss

vite.js + Tailwindcss 폴더구조

1. npm install -D tailwindcss postcss autoprefixer  // 설치
2. npx tailwindcss init -p  // tailwind.config.js 만듬

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. tailwind.config.js 파일 수정

// tailwind.config.js

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

4. src>index.jsx 에 다음 3개의 지시자를 맨 위에 추가한다.

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