vite + react 에 tailwind.css + antd 적용하기

1. react 프로젝트 만들기

npm create vite@latest . -- --template react

. 대신 원하는 프로젝트 명 을 가진 directory 생성가능
latest 대신 원하는 버전 지정

react 대신 vue나 기타 template 지정

 

2. tailwind 설치  공식문서>> https://tailwindcss.com/docs/installation/using-vite

npm i tailwindcss  @tailwindcss/vite

 

 

3. vite.config.js 설정

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

 

4. src/App.css 설정

@import "tailwindcss";

 

 

5. src/App.jsx 에 App.css import

import { useState } from 'react'
import './App.css'

function App() {

  return (
    <>
      <h1 className="text-red-500 text-3xl font-bold underline">
        Hello world!
      </h1>
    </>
  )
}

export default App

 

---

 

6. vite port변경 server default > 5173/ preview default > 4173 (필요 시)  >>>> https://ko.vite.dev/config/preview-options.html#preview-port

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  server: {
    port: 3000
  },
  preview: {
    port: 8080
  }
})

 

---

7. antd설치

npm i antd

 

 

8. tailwind + antd 적용하기 App.css 적용 전에 antd css 먼저 적용

@import 'antd/dist/reset.css';
@import "tailwindcss";