Vue 3 + Vite 환경에서 Tailwind CSS 설치하기

본 포스팅은 Visual Studio Code IDE 환경을 기준으로 작성되었습니다.

1. npm 을 통해 Vue프로젝트를 생성해 줍니다.

   npm init vue@latest

2. Tailwind CSS를 설치해 줍니다.

   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3. 아래 명령어를 통해 tailwind.config.js 파일과 postcss.config.js 파일을 생성합니다.

   npx tailwindcss init -p

4. tailwind.config.js 를 아래와 같이 최적화해 줍니다.

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

5. /src/ 경로 또는 /src/assets/ 경로에 index.css를 생성하고 아래 내용을 붙여넣습니다.

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

• 생성 경로는 취향에 맞게 지정하셔도 됩니다.
• /src/assets/css/ 등 프로젝트 설계 구조에 따라 원하시는 디렉토리 내에 생성해 주세요.

6. main.js 에서 5번 과정에서 생성한 index.css를 임포트합니다.

   import { createApp } from 'vue';
   import App from './App.vue';
   import './assets/css/index.css';
   ...
   createApp(App).mount('#app');

여기까지 하시면 Vue3 + Vite + Tailwind CSS 세팅이 완료됩니다.

만약 Tailwind 자동완성(클래스명, 변수명 등)이 안될 경우

---

저의 경우에는 VS Code에서 Tailwind CSS의 스니펫을 제공해 주는 익스텐션인 Tailwind CSS IntelliSense를 설치하여 사용하고 있습니다.
일반적인 HTML 문서에서는 너무나도 정상적으로 동작했으나, 확장자가 .vue 인 Vue 프로젝트에서는 자동완성이 잘 되지 않았습니다.
이 문제로 30여 분을 헤매다가 아래와 같은 절차로 해결했습니다.

1. 먼저 Tailwind CSS IntelliSense 익스텐션을 설치하지 않으신 분들은 설치해 주세요.
2. VS Code의 settings.json을 열고 아래의 아래의 옵션들을 추가합니다.

   "tailwindCSS.includeLanguages": {
   "vue": "html",
   "vue-html": "html"
   },
   "editor.quickSuggestions": {
   "strings": "on"
   }

3. 저장합니다. 이후 다시 시도해보시고 바로 반영이 안되신다면 VS Code를 종료한 후 다시 실행해서 시도해보시기 바랍니다.

쓰면 쓸수록 Tailwind CSS는 장점이 뚜렷하여 점점 더 많은 프로젝트에서 사용하고 싶어집니다.
물론 최적화 처리를 따로 하지 않는다면 상당히 무겁다는 단점은 있지만 말이죠.