<div id="readability-page-1" class="page"><div>
 <div id="SE-9e8b72f5-f920-44bb-b473-b35b42b94b07">
 <blockquote>
 도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :)
 </blockquote>
 </div>
 <div id="SE-45696864-460f-4b2c-aee5-07e1c42df353">
 ​​​개요 ​vscode 에서 tailwindcss 자동완성이 제대로 안나오는 경우가 있다. 이때 몇가지 설정이 필요하여 정리한다.​​​extension 설치​본인은 아래 두가지 extension 을 설치했다. Tailwind CSS IntelliSense 가 자동완성을 지원해주고 PostCSS 는 Tailwind 를 도와주는 역할을 하는 보조도구 정도로 생각하면 된다.​
 </div> <div id="SE-f92e4e9d-969f-436e-a26c-bf581863c365">
 ​​​vscode 설정 추가​vscode 의 설정 (settings.json) 을 열고 아래와 같이 설정을 추가해주자.각 설정에 대한 자세한 설명은 아래 링크를 참고하자.설정을 추가하고 vscode 를 재시작하거나 새로운 설정이 적용되기까지 1~2분 정도 기다려야 한다.
 </div> <div id="SE-a211dc87-9698-4942-b4e5-1e60bf671caf">
 "tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
 "strings": true
},
"css.validate": false,
 </div> <div id="SE-fc4c528a-6aac-4e61-bfef-f423eab0cb1f">
 ​​​프로젝트에 tailwind 설정 파일 추가​위 설정들을 다했음에도 자동완성이 안나온다면 프로젝트 디렉토리에 tailwindcss 관련 설정파일을 생성하자.아래 명령어를 입력하면 두가지 설정파일이 생긴다.<ul><li>postcss.config.js</li><li>tailwind.config.js</li></ul>​본인은 설정파일을 생성하니 자동완성이 잘 동작했다.
 </div> <div id="SE-0ef5dc53-b8f8-48b5-844a-683064067103">
 $ npx tailwindcss init -p
 </div> <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

도움이 되시면 '광고'를 한번씩 눌러시면 감사하겠습니다 :) 개요 vscode 에서 tailwindcss 자동완성이 제대로 안나오는 경우가 있다. 이때 몇가지 설정이 필요하여 정리한다. extension 설치 본인은 아래 두가지 extension 을 설치했다. Tailwind CSS IntelliSense 가 자동완성을 지원해주고 PostCSS 는 Tailwind 를 도와주는 역할을 하는 보조도구 정도로 생각하면 된다. vscode 설정 추가 vscode 의 설정 (settings.json) 을 열고 아래와 같이 설정을 추가해주자. 각 설정에 대한 자세한 설명은 아래 링크를 참고하자. 설정을 추가하고 vscode 를 재시작하거나 새로운 설정이 적용되기까지 1~2분 정도 기다려야 한다. 프로젝트에 ta.......

[CSS] vscode TailwindCSS 자동완성 설정

댓글