[React] Vite + React + TypeScript 에 Tailwindcss 사용하기

---

1.npm tailwindcss 설치

npm install -D tailwindcss postcss autoprefixer

 

 

 

 

2.tailwind.config.js 생성

다음 명령어로 tailwind.config.js 파일을 생성하고 다음과같이 수정한다.

npx tailwindcss init

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

 

 

3.vite.config.ts 파일수정 

vite.config.ts을 다음처럼 수정한다.

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
 
});

 

 

 

4.index.css

/scr/index.css 파일에 다음을 추가한다.

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

 

 

 

5.사용

그후 index.css 을 불러온다음에 사용한다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import Foods from './pages/Foods'
import './index.css';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Foods />
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  </StrictMode>,
)