[Tailwind CSS v4.1] 설치 및 사용해보기

본 문서는 2025.10.23 기준으로 작성되어 적용 시점의 공식문서 확인이 필요합니다

 

 

 

 

실제 실무 프로젝트에서도 도입하여 잘 사용하고 있는 tailwindcss를 순서대로 설치해 보겠습니다

tailwindcss 뿐만 아니라 함께 사용하면 좋을 확장팩과 플러그인까지 함께 설치를 추천드립니다

 

 

1. tailwindcss 설치

https://tailwindcss.com/

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

 

 

2. vscode 확장팩

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Tailwind CSS IntelliSense - Visual Studio Marketplace

 

 

3. prettier plugin 설치

https://github.com/tailwindlabs/prettier-plugin-tailwindcss

GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on

npm install -D prettier prettier-plugin-tailwindcss

 

.prettierrc 파일 추가 후 아래 코드 작성

{
  "plugins": ["prettier-plugin-tailwindcss"]
}