테일윈드CSS 클래스명을 감춰주는 - Tailwind Fold

TailwindCSS 는 정말 편리한 구석이 많습니다.  이미 많은 사람들이 사용하고 있다는 것이 그 편리함에 대한 반증이겠죠. 하지만, TailwindCSS에도 단점이 있습니다. 바로 클래스명이 지나치게 길어진다는 것이죠.

일단 작성할때는 너무 편리합니다. 클래스명을 어떻게 지어야할까 고민하지 않아도 되고, BEM 방식과 같이 체계적인 명명 방식을 설계하려고 애쓰지 않아도 됩니다.

하지만 재사용성이 좀 떨어지고, 가독성이 심각하게 무너지는 것이 단점입니다. 재사용성은 리액트, VUE와 같은 컴포넌트 방식으로 조립되는 UI 라이브러리를 사용한다면 어느정도 극복 가능합니다만, 가독성 만큼은 좀 처럼 해결이 어렵습니다.

그래서 TailwindCSS에 대해 악평을 유발하는 부분이기도 하죠. 극단적으로는 style로 선언하는 것과 무엇이 다르냐는 혹평을 받게 만드는 부분이기도 합니다.

하지만 사람들은 늘 답을 찾아내기 마련이고, Tailwind Fold라는 확장 프로그램이 그런 답이 되어주는 것 같습니다.

보시다시피 Tailiwind CSS로 작성된 클래스명들을 자동으로 감춰주는 기능이 있습니다. 웹스톰에서도 같은 플러그인이 있어서 아주 편리하게 사용했었는데, VS CODE에서도 확장프로그램이 존재하고 있습니다.

웹스톰에서 사용할 경우엔 아무 설정없이 설치만으로도 해결이 됩니다만, VS Code에서는 약간의 설정이 필요합니다.

확장 설정에서 아래 두 옵션을 활성화시켜주세요

자동으로 클래스명을 감춰주는 옵션입니다.

감춰진 클래스명을 클릭하면, 해당 부분을 펼쳐주는 기능입니다.

그리고 settings.json에서 아래와 같은 설정을 추가해주세요

"tailwind-fold.supportedLanguages": [        
        "blade",
        "html",
        "typescriptreact",
        "javascriptreact",
        "typescript",
        "javascript",
        "vue-html",
        "vue",
        "php",
        "markdown",
        "coffeescript",
        "svelte",
        "astro"
    ]

지원되는 언어/파일 확장자를 지정해주면, 해당 파일에서 알아서 클래스명을 감춰주게 됩니다.

위와 같은 설정만 간단히 해주고 나면, tailwind css를 훨씬 더 편리하게 사용할 수 있습니다 :)