<div id="readability-page-1" class="page"><div><p><a href="https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss">tailwind css intellisense</a> 익스텐션을 그냥 설치하면, ReScript-React 에서 테일윈드를 사용하더라도 자동완성이나 validation이 딱히 작동하지 않는다. 아래와 같은 설정을 따로 해 줘야 하는데, 당연히 해당 vs code 익스텐션을 fork해야 할 것이라고 (...) 생각했지만 회사 분의 도움으로 상당히 간단하게 설정만으로 해결이 가능했다.</p>
<p>(회사에서는<code>tailwind-ppx</code>를 사용하고 있어, <code>%tw("...")</code> 블럭 안에 사용하는 것이 가정되어 있지만, className 등을 타겟으로 정규식을 짤 수도 있겠다)</p>
<pre><code>  "tailwindCSS.includeLanguages": {
    "plaintext": "javascript"
  },
  "css.validate": false,
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.classRegex": ["%tw\\(\\s*\"([^\"]*)\"\\s*\\)"]</code></pre></div></div>

tailwind css intellisense 익스텐션을 그냥 설치하면, ReScript-React 에서 테일윈드를 사용하더라도 자동완성이나 validation이 딱히 작동하지 않는다. 아래와 같은 설정을 따로 해 줘야 하는데, 당연히 해당 vs code 익스텐션을 fork해야 할 것이라고 (...) 생각했지만 회사 분의 도움으로 상당히 간단하게 설정만으로 해결이 가능했다.
(회사에서는tailwind-ppx를 사용하고 있어, %tw("...") 블럭 안에 사용하는 것이 가정되어 있지만, className 등을 타겟으로 정규식을 짤 수도 있겠다)
  "tailwindCSS.includeLanguages": {
    "plaintext": "javascript"
  },
  "css.validate": false,
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.experimental.classRegex": ["%tw\\(\\s*\"([^\"]*)\"\\s*\\)"]

ReScript / VS Code 환경에서 tailwind 자동완성 설정하기

댓글