Tailwind v4에서 Tailwind CSS IntelliSense 자동완성 문제 해결

윤태현·2025년 4월 5일

TAILWIND

목록 보기

1/1

Tailwind CSS IntelliSense는 VSCode 확장 프로그램으로 TailwindCSS 클래스의 자동 완성, 문법 하이라이팅, 린팅 등을 제공하여 개발 생산성과 코드 품질을 향상시켜줍니다.

최근 TailwindCSS가 v4로 버전이 업데이트 되었습니다. 그 과정에서 Tailwind CSS IntelliSense 확장 프로그램이 동작하지 않는 문제가 발생했는데 이를 해결한 내용을 작성한 글입니다.

언어 : TypeScript (v5.7.2)
라이브러리 : React (v19.0.0)
스타일 : TailwindCSS (v4.0.15)
빌드 도구: Vite (v6.2.0)

TailwindCSS v4

Tailwind CSS v4는 이전 버전(v3 이하)과 비교해 주요한 변화가 있습니다.

v3 이하 버전에서는 tailwind.config.js 파일을 통해 설정을 관리했지만 v4에서는 config 파일 대신 CSS 파일에서 @import "tailwindcss"를 사용해 설정을 통합했습니다. JavaScript 의존성을 줄이고 빌드 성능을 향상 시키기 위한 변화입니다.

그리고 IntelliSense 확장 프로그램은 tailwind.config.js 파일을 기반으로 프로젝트를 인식해서 별도의 설정 없이 확장 프로그램 기능들을 사용할 수 있습니다.

그렇기 때문에 v4 버전에서는 tailwind.config.js 파일이 없어서 IntelliSense이 자동으로 설정을 못찾는 경우가 발생하여 확장 프로그램 기능 등을 사용하지 못하는 문제가 발생합니다.

Vite + TailwindCSS 프로젝트 생성 및 설정

1. Vite 설치

https://ko.vite.dev/guide/

# npm v7 이상에서는 `--` 를 반드시 붙여주세요

npm create vite@latest my-project -- --template react

cd my-project
npm install

2. TailwindCSS 설치

https://tailwindcss.com/docs/installation/using-vite

2-1. Vite용 Tailwind 설치

npm install tailwindcss @tailwindcss/vite

2-2. Import Tailwind CSS

가장 메인 css 파일에 테일윈드 import
src/index.css 파일로 진행했습니다.

@import "tailwindcss";

2-3. Vite 플러그인 구성

vite.config.js(ts) 파일에서 TailwindCSS 플러그인 설정을 해야 Vite 환경에서 테일윈드를 사용할 수 있습니다.

// vite.config.ts

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
  ...
})