Tailwind Custom Class Attributes intelisense enable

Hwanhoon KIM·2024년 1월 3일

소개

tailwind에서 intelisense를 사용할 때 단순히 className이나 class 말고도 다른 것에도 적용되게하는 것이다.

방법

vs code 유저 settings JSON에 다음을 추가한다.

"tailwindCSS.experimental.classRegex": [
    ["Styles \\=([^;]*);", "'([^']*)'"],
    ["Styles \\=([^;]*);", "\"([^\"]*)\""],
    ["Styles \\=([^;]*);", "\\`([^\\`]*)\\`"]
  ],

이렇게하면 Styles로 끝나는 모든 변수명에 인텔리센스가 적용되며, 객체로 해서 객체 안에 다른 변수가 있어도 또한 적용된다.

const buttonStyle = "w-[50%] max-w-[350px] uppercase font-semibold";
const buttonStyles = {
  default: "마찬가지로 적용 됨.",
};

출처:

https://stackoverflow.com/questions/66614875/how-can-i-enable-tailwind-intellisense-outside-of-classname

profile
Fullstack Developer, I post about HTML, CSS(SASS, LESS), JavaScript, React, Next, TypeScript.

0개의 댓글