Vue3.js 에서 tailwindcss 설치하기 (postcss 에러 났을 때)

tailwindcss 공식홈페이지에 있는 내용대로 vite 를 설치해서 진행하면 문제가 없지만,

기존에 사용하던 vue3 에 추가하려니 아래와 같은 에러가 발생하여 설치가 제대로 되지 않았다. 

 

Error: PostCSS plugin tailwindcss requires PostCSS 8.

 

 

찾아보니 해결책이 있었다. PostCSS 7 을 지원하는 다른 빌드로 설치를 하는 것 같다.

How to Setup Tailwind CSS in Vue 3 | Devjavu

How to Setup Tailwind CSS in Vue 3

 

 

--------------------------------------------------------

- 기존에 설치한 것들을 삭제하고 아래 명령어대로 설치를 진행한다

# 기존에 설치한 의존성 삭제
npm uninstall tailwindcss postcss autoprefixer

# 삭제 후 아래 모듈 설치
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

# tailwind, postcss config 파일 생성
npx tailwindcss init -p

 

- tailwind.config.js 파일 purge 에 아래와 같이 작성.

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

 

- /src 폴더 밑에 styles 폴더를 만들고 app.css 파일을 만든다.

/* ./src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

 

- main.js 에서 app.css 파일을 임포트한다.

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './styles/app.css';

createApp(App).use(store).use(router).mount('#app');

 

- 정상적으로 적용되는 지 확인한다

<template>
  <div>
    <h1 class="font-bold underline">This is an about page</h1>
  </div>
</template>