Vite 사용자를 위한 테일윈드 설치

https://tailwindcss.com/docs/guides/vite

Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS

순서

프로젝트 개발 디펜던시에 설치

(프로젝트 루트 경로에서 터미널을 열어 수행)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js 파일이 생김.

다음으로 붙여 넣기

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.css 다시 쓰기

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

이제 알아서 테일윈드 적용됨.

주의

• 기존 PurgeCSS 등에 의존하였던 ‘(네트워크I/O 감소를 위하여) 프로젝트에 사용되지 않은 테일윈드 클래스 제거’ 등이 이제 내장되어 지원됨으로써

  • 클래스네임에 넣을 테일윈드 클래스네임 문자열을 동적으로 생성하여 넣는 경우, 프로젝트 내에 완성된 문자열이 없으므로 테일윈드에 적용되지 않을 수 있음.

  예) 다음처럼 사용 시 테일윈드가 “bg-gray-800”을 포함하지 않을 수 있다.

  const SampleComponenet = () => {
  	const myStyleClasses = "bg-gray-" + 800;
  	return (
  		<div className={myStyleClasses}>
  			<h1>뭐시여</h1>
  		</div>
  	)
  }