[ Tailwind CSS ] - React Vite에서 Tailwind CSS 설치하기

 

https://tailwindcss.com/docs/installation/using-vite

Installing with Vite - Installation

공식 문서를 참고하면서 설치했습니다.

 

1. React Vite 설치

npm create vite@latest 

 

2. Tailwind CSS 설치

npm install tailwindcss @tailwindcss/vite

 

또는

 

npm install tailwindcss @tailwindcss/vite
npx tailwindcss init

 

3. vite.config.js

(.js -> 확장자는 프로젝트에 맞게 지정해주시면 됩니다! 저는 javascript로 사용할 예정이라 .js로 지정했습니다

typescript를 사용하신다면 vite.config.ts로 )

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

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

 

4. tailwind.config.js

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

 

5. index.css

@import "tailwindcss";

 

6. 적용하기

export default function Test() {
    return (
        <div className="text-3xl font-bold underline">
            hi
        </div>
    )
}

 

7. 결과

 

이렇게 적용된 화면을 잘 보실 수 있습니다!