배경

Visual Studio에서 tailwind CSS의 유틸리티 클래스를 자유자재로 사용하려면 tailwind를 많이 써서 손에 익어야겠다 싶었습니다. HTML의 Tag의 Class에 사용할 유틸리티를 먼저 작성하고 빌드하면 최종의 css 파일이 생성되는데, 공식 document를 훑어봐도 익숙지 않아서 자주 까먹게 됩니다. 인텔리센스가 있지 않을까? 싶었는데 Visual Studio Code 편집기의 Extension에 Tailwind CSS Inellisense가 있다고 해서 개발 환경을 설정해 보았습니다. 😆

2023.10.24 - [개발/ASP.NET] - [Web App/MVC] TailWind CSS 설정하기

[Web App/MVC] TailWind CSS 설정하기

배경 주로 개인 프로젝트에서는 부트스트랩의 유틸리티를 사용해서 HTML에서 인라인으로 스타일을 만드는 방법을 즐겨 사용합니다. 처음에는 부트스트랩의 만들어진 컴포넌트를 즐겨 썼는데,

hyangforest.tistory.com

Visual Studio Code - Extension

Tailwind CSS IntelliSense

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

Tailwind CSS IntelliSense - Visual Studio Marketplace

Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code

marketplace.visualstudio.com

⚠️ 설치 후 인텔리센스가 작동하지 않을 때 설정 확인하기

VS Code의 작업 영역을 설정할 때 tailwind.config.js 파일을 포함해야 합니다.
settings.json 에서 옵션을 추가합니다.
{ "editor.quickSuggestions": { "strings": "on" }, "files.associations": { "*html": "html", "*.css": "tailwindcss" } }