Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- vitepwa
- 데코레이터
- 리액트
- git
- 플로이드워셜
- unionfind
- 14658
- QuerySetAPI
- SQL
- SSAFY
- 머신러닝종류
- react
- PWA
- pwa적용하기
- 백준
- js
- TypeScript
- Javascript
- sqld
- queryset
- 싸피셜
- 셀프넘버
- db
- 싸피
- VITE
- SSAFYcial
- 싸피10기
- Django
- Python
- 알고리즘
Archives
- Today
- Total
Meme's IT
[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>
)
'FrontEnd > React' 카테고리의 다른 글
[React + Firebase] 리액트와 firebase를 이용해서 알림기능을 구현해보자 (0) | 2024.04.11 |
---|---|
[React] 마우스로 그림을 그려보자 (0) | 2024.03.22 |
[React] 파일 업로드 버튼 만들기(+ typescript) (0) | 2024.03.12 |
[React] JWT 인증키 저장하기 (0) | 2024.02.04 |
[React] Vite로 React 프로젝트 만들기 (0) | 2024.01.18 |