Vite 프로젝트 시작

Shortcut

npm install -D @types/eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser autoprefixer eslint postcss prettier prettier-plugin-tailwindcss tailwindcss typescript

tailwind.config.js

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

npm create vite@latest project-name --template react-ts
cd project-name

npm install
npm run dev

package.json 확인

{
  "name": "project-name",
  "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.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
  }
}

Tailwind 세팅

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

tailwind.config.js 파일을 vite 에 맞게 수정합니다.

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

index.css 파일을 수정합니다.

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

Optional

DaisyUI

무료로 제공하는 컴포넌트가 가장 많은 DaisyUI

npm i -D daisyui

@tailwindcss/line-clamp

여러 줄의 텍스트를 지정한 수의 줄로 잘라서 표시해주는 플러그인

npm i -D @tailwindcss/line-clamp

tailwind.config.js 수정

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/line-clamp'), require('daisyui')],
}

tailwind prettier

tailwind css 의 convention 에 맞게 자동으로 className 들의 순서를 맞춰준다.

npm install -D prettier-plugin-tailwindcss

prettier.config.js 파일에 플러그인 정의

export default {
  semi: false,
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  trailingComma: 'es5',
  bracketSpacing: true,
  plugins: ['prettier-plugin-tailwindcss'],
}