TailwindCSS 설치

2024-05-10 tailwind v3.4.3 기준

 

Vite와 함께 사용할 것이므로 Installation에 "Using PostCSS"를 참고한다.

 

1. Tailwind 패키지 설치

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

 

2. PostCSS 설정 추가

root 위치에 postcss.config.js 파일을 추가한다.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

⚠️ 'module' is not defined...
eslint 오류인데, 코드상으로는 문제가 없다.
파일 확장자를 cjs로 바꿔주거나 ES Modules 구조로 바꿔주기.

⚠️ 파일이 commonjs 모듈입니다. es 모듈로 변환될 수 있습니다...
위와 동일한 맥락. ES Modules 변환시켜주면 더 이상 뜨지 않는 경고다.
다만, ES Modules로 사용하려면 package.json에 type이 "module"로 명시가 되어있는지 확인할 것.

 

3. Tailwind 설정 추가

패키지 설치 후 생성된 tailwind.config.js 파일에 다음과 같이 content를 추가한다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

4. main.css 파일에 Tailwind 디렉티브 추가

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

⚠️ unknown at rule @tailwind...
해당 디렉티브가 전처리되지 않아서 나는 오류이다.
VSCode에서는 PostCSS Language Support 확장을 설치해서 회피 가능하다. 혹은 .vscode/setting.json에 다음과 같이 추가하여 회피 가능하다. 다만, 이 방법은 css 파일 이외에서 나타나는 warning은 없애지 못한다.

"files.associations": { "*.css": "tailwindcss" }​

 

5. 프로젝트 실행

프로젝트 실행해서 확인하고 config 파일 수정해서 쓰면 된다.

> npm run dev

---

참고:

[1] Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.