Tailwindcss 구성과 사용

[4BFC]

issue

• ts 환경에 tailwindcss를 설정하고 구성한다.
  • 필요한 플러그인들을 구성한다.
    • autoprefix
    • postcss
    • postcss-import
    • postcss-cli
    • postcss-nesting
  • 유령 의존성의 유무를 파악하고 yarn-worksapce에 대한 느낀점을 생각해본다.
    • webpack으로 파일들을 구성하지는 않는다. 및 바벨 또한 현재 생각하지 않는다.

TailwdCSS 생성 및 구성

• ts 환경에 tailwindcss를 설정하고 구성한다.
  • tailwindcss를 설치하기 위해서는 하위 디렉토리인 TextAdventureGame디렉토리 package.json에 설치를 실행했다. 이는 다음과 같다.

    # package.json 초기화
    yarn init -y
    
    # typesciprt 설치(tsc 명령 사용함에 의존성을 잃어버려서 불가피하게 설치)
     yarn add typesciprt -D  
    
    # TailwindCSS 설치
    yarn add tailwindcss -D
    

    이후 root디렉토리로 넘어가서 아래와 같은 플러그인들을 설치한다.

    # PostCSS 설치 및 관련 플러그인
    yarn add postcss-cli postcss-import postcss-nesting autoprefixer -D
    
    # TailwindCSS 설정 파일 생성
    yarn tailwindcss init
    
    # PostCSS 설정 파일 생성
    yarn postcss init
    

    처음에는 다른 하위 디렉토리에 react가 설치되어 있는 환경에서 추가적으로 tailwindcss라는 디렉토리를 생성 했다. 하지만 react가 불필요하다고 생각해서 해당 디렉토리를 제거 후 tailwindcss의 ts환경을 동작해본 결과 ts의 의존을 손실하게 되는 불상사가 나타나게 되었다. 여러 과정 중에 계속해서 react관련 패키지들을 찾는 오류도 발생하고 아무리 캐시와 yarn.lock및 .pnp.cjs, 등을 초기화 해도 같은 오류가 발생하게 되면서 MODULE_NOT_FOUND와 같은 오류들도 자주 발생했다. 계속해서 pnp의 의존을 하지 않고 node_modules를 찾게되는데 yarnrc.yml파일에서 nodeLinker로 반복적인 전환을 해주면서 에러가 발생하지 않게 하는 방식은 수고로움이 많다고 판단이 되어서 하위 디렉토리가 아닌 해당 오류가 발생하는 플러그인들을 모두 루트에서 관리할 수 있게 했더니 오류가 발생하지 않았다. 물론 ts와 같은 오류는 이와 반대로 ts를 하위 디렉토리까지 상속받지 못하는 상황이여서 불가피하게 하위 디렉토리에서 ts를 설치하게 되었다.

플러그인

• 필요한 플러그인들을 구성한다.

  • 내가 설치한 플러그인들은 다음과 같다.

  plugin	ver	about
  autoprefixer	10.4.20	CSS 코드에 자동으로 브라우저 호환성을 위한 벤더 접두사를 추가합니다. 예를 들어, 특정 브라우저에서만 지원하는 CSS 속성(-webkit-, -moz- 등)을 직접 추가할 필요 없이, Autoprefixer가 이를 처리하여 다양한 브라우저에서 CSS가 제대로 동작하도록 해줍니다.
  postcss	8.4.45	CSS를 변환하기 위한 도구로, 다양한 플러그인을 통해 CSS를 전처리 및 후처리할 수 있는 플러그인 기반의 도구입니다. Autoprefixer, PostCSS-import와 같은 플러그인들이 이 환경에서 동작합니다.
  postcss-import	14.0.3	CSS 파일을 모듈처럼 불러올 수 있게 해줍니다. 즉, CSS 파일 안에서 다른 CSS 파일을 @import를 사용하여 가져오는 기능을 제공합니다. 이 기능은 CSS 파일들을 모듈화하고 재사용할 때 유용합니다.
  postcss-cli	9.1.0	PostCSS를 CLI(Command Line Interface)를 통해 실행할 수 있도록 해주는 도구입니다. 이를 통해 터미널에서 명령어로 PostCSS 작업을 자동화할 수 있습니다.
  postcss-nesting	10.1.5	CSS에서 중첩 규칙을 사용할 수 있게 해주는 플러그인입니다. Sass와 같은 전처리기에서 제공하는 중첩 기능을 PostCSS에서도 사용할 수 있게 해줍니다.

  • 실질적으로 잘 활용하지 못한 점이 아쉽다. 개인적으로 index.css에서 커스텀한 다른 css파일들을 @import로 하나로 묶어 build가 되면서 다양하게 활용을 하려고 했으나 그렇지 못한 것이 제일 아쉬웠다. 물론 내가 고수한 방식과 방법만이 해결책은 아니다. 찾아보니 tailwindcss.config.js에서 스타일 토큰을 생성하고 그것들을 html에 가지고와서 사용할 수 있었다. 이 방법이 가장 안정적이고 많은 tailwindcss를 사용하는 일반적인 방식이다.
  • @import를 사용하지 못한 이유
    • @import는 postcss-import플러그인으로 부터 사용할 수 있는데 명화한 오류나 원인이 log나 error가 도출되지 않아 방황하게 되다가 config파일에서 스타일 토큰으로 커스텀하는 방식을 알게되면서 @import 시도를 우선 중단 하였다. 뿐만 아니라 tailwindcss는 js in css 방식이기에 bootstarp, inlineStyle과 같은 방식을 사용하는 것이 본래에 맞는 의도이고 취지이다. 즉, css를 최대한 줄이는 것이 tailwindcss를 사용하는 목적이라는 것이다. 따라서 스타일 토큰을 적극적으로 활용하는 측면이 좋겠다는 판단을 하였다.
  • scss와 tailwindcss
    • 이둘을 결합헤서 사용하면 좋겠다는 생각을 했으나 앞서 설명했 듯이 tailwindcss의 취지에 맞게 사용하는 것이 맞다 판단하여 더 이상 시도하지 않고 레거시가 된 이슈이다. scss를 tailwindcss에 사용하기 위해서는 scss와 결합 할 수 있는 플러그인을 설치해야만 한다.

webpack과 babel

• webpack으로 파일들을 구성하지는 않는다. 및 바벨 또한 현재 생각하지 않는다.
  • 시간적 여유가 된다면 한번 시도해볼 이슈 중 하나이다. 이를 통해서 리액트나 여러 프로젝트가 어떻게 동작을 하는지 알 수 있는 기반을 다지는 좋은 경험이 될 것이라고 판단한다. 기회가 된면 이부분에 관해서 다루어 볼 것이다.