vue tailwind 사용하기 / 최신버전이 안될경우

문제인식

2025-03-13 현재 최신 버전 으로 설치하면 동작이 안되네요

1년전에 잘되던 과거버전으로 설치하기 위한 작업 순서를 정리하였습니다.

 

특정 버전 모듈 설치

npm install -D tailwindcss@3.4.1

npm install -D autoprefixer@10.4.18

npm install -D postcss@8.4.35

yarn install

tailwind.config.js 파일 생성

/** @type {import('tailwindcss').Config} \*/

module.exports = {

purge: ["./index.html", "./src/**/\*.{vue,js,ts,jsx,tsx}"],

content: [],

theme: {

container: {

center: true,

},

extend: {},

},

plugins: [],

};

파일 내용 끝

postcss.config.js 파일 생성

module.exports = {

plugins: {

tailwindcss: {},

autoprefixer: {},

},

};

파일 내용 끝

src/index.css 파일 생성

/_ ./src/index.css _/

@tailwind base;

@tailwind components;

@tailwind utilities;

파일 내용 끝

src/main.ts 파일 수정

import "./index.css"; // 추가

파일 내용 끝

확장 프로그램 설치

Tailwind CSS IntelliSense

재시작

vscode 를 재시작 해야 자동완성 되어씀