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

프로젝트 설정 중 CRA에서는 tailwindcss가 작동되는데

vite에서는 작동이 안된다

 

문서에서 시키는 대로 했는데 안됨

찾아보니 vite는 설치 방법이 약간 달랐다

 

1. 공식 문서 방법

역시 공식 문서에 있었다

installation에는 없고, 검색어로 vite를 입력해야 나온다

 

기존 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>