tailwindcss가 vite에서 적용 안될 때 해결 방법(tailwindcss not working in vite)

프로젝트 설정 중 CRA에서는 tailwindcss가 작동되는데, vite에서는 작동이 되지 않았다.

 

1. 공식 문서 방법

기존 tailwind 설치 이외에 2개의 패키지 설치가 필요하다.

npm install -D tailwindcss postcss autoprefixer

Install Tailwind CSS with Vite - Tailwind CSS

 

2. 기존 방법 + vite.config 수정

1번 방법을 찾기 전에 다른 방법을 찾아서 적용했다.

이미 공식문서대로 설치 후 작동 안되는 것을 발견했을 때, vite.config파일에서 css파트만 넣어주면 된다.

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

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

Installation - Tailwind CSS

 

3. cdn

index.html에 cdn을 작성해도 된다 (이 방법은 라이브러리를 설치 안했을 때 사용하자)

<script src="https://cdn.tailwindcss.com"></script>