[React] Vite에 Tailwind CSS와 Next UI 세팅하기

우선 설치부터,

 

• tailwind

npm install -D tailwindcss postcss autoprefixer

 

• Next UI

npm i @nextui-org/react framer-motion

 

 

이제 설정해주자

tailwind.config.js에서

/** @type {import('tailwindcss').Config} */

const {nextui} = require("@nextui-org/react");

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
}

이런식으로 추가해준다

 

 

그다음에 index.css에

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

이거 해주고, 이때 오류라고 선 생기는데 무시

 

 

main.tsx에서

import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { BrowserRouter } from 'react-router-dom';
import {NextUIProvider} from "@nextui-org/react";
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <NextUIProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </NextUIProvider>
)