내가 모든 프로젝트에 Tailwind CSS를 사용하는 4가지 이유

반응형

저는 UI 프레임워크를 많이 사용하곤 했습니다. 부트스트랩, 재료 UI, 개미 디자인… 네, 편리하고 전체 프로젝트에서 몇 줄의 CSS만 작성하면 됩니다.

하지만 문제는 웹사이트가 부트스트랩을 기반으로 만들어졌다는 것입니다. 다른 많은 웹사이트들처럼 말이죠. UI 프레임워크는 구성 요소가 너무 엄격하게 정의되어 있기 때문에 웹 사이트의 고유한 스타일에 맞게 사용자 지정하기가 어렵습니다. 그것들은 제 웹사이트를 "내 것"처럼 보이게 하지 않고, 모든 사람들이 사용하는 인기 있는 템플릿에서 나온 것입니다.

저는 작년에 Tailwind CSS를 도입하면서 제 프로젝트마다 사용하기 시작했고, 기존의 프로젝트들을 재구성했습니다. CSS 프레임워크이긴 하지만 UI 프레임웍스처럼 간단하게 커스터마이징 가능한 스타일을 작성할 수 있으며, 일반 CSS에서 코딩하는 것과 동일하게 동작할 수 있습니다. 내가 이것을 사용하는 것을 좋아하는 이유와 사용하기 쉬운 이유 4가지를 소개합니다.

 

간편한 인라인 스타일링

일반 CSS 블록을 작성하고 HTML 요소에 성가신 선택기를 추가하는 대신 Tailwind를 사용하면 HTML 요소에 스타일을 직접 추가할 수 있습니다. 이것은 JSX의 스타일 속성 같지만 좀 더 간결한 문법을 가지고 있습니다.

예를 들어, 정규 HTML과 CSS의 스타일 아바타는 다음과 같다.

<img src="image.png">
  img {
      width: 6px,
          height: 6px,
              border-radius: 100%
  }
              ```

              반면 테일윈드는

              <div class="content-ad"></div>

              ```js
              <img src="image.png" class="w-6 h-6 rounded-full">
              ```

              ## 미리 정의된 속성 값

              Tailwind는 UI가 특정 패턴을 따르도록 미리 정의된 여러 형식으로 CSS 속성 값을 설정합니다. 이렇게 하면 서로 다른 구성요소에 대해 일치하지 않는 특성 값을 방지하고 특성에 대한 전역 패턴을 정의하는 데 걸리는 시간을 절약할 수 있습니다.

              ![border-radius predefined value](https://res.cloudinary.com/practicaldev/image/fetch/s--flIHfGo---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42j3mxskrholmb0trh3p.png)

              ## 사용자 지정 가능

              <div class="content-ad"></div>

              Tailwind에는 미리 정의된 속성 값이 있지만 자신의 속성 값을 사용자 정의할 수 있습니다.

              ```js
              // tailwind.config.js
              module.exports = {
                theme: {
                    borderRadius: {
                          'none': '0',
                                DEFAULT: '4px',
                                      'large': '12px'
                                          }
                                            }
                                            }
                                            ```

                                            더 일반적인 사용 사례는 CSS 선택기와 같은 스타일 클래스를 전체적으로 정의하는 것이다. 이렇게 하면 여러 구성요소에 대해 동일한 스타일을 작성하여 다양한 시나리오에서 재사용할 수 있습니다.

                                            ```js
                                            // index.css
                                            @layer component {
                                              .hover-transition {
                                                  @apply transition duration-200 ease-out;
                                                    }
                                                    }
                                                    // myComponent.html
                                                    <div class="w-10 h-6 hover-transition"> hover me </div>
                                                    ```

                                                    ## 쉽게 대응 가능

                                                    <div class="content-ad"></div>

                                                    CSS가 처음 나왔을 때는 화면 크기에 따라 반응하는 스타일을 통합하지 않았다. 미디어 쿼리는 2016년까지 CSS에 도입되지 않았지만 개발자들이 전체 응답 애플리케이션을 작성하기에는 여전히 구문이 지루하다.

                                                    ```js
                                                    button {
                                                      hidden
                                                      }
                                                      @media screen and (min-width: 768px) {
                                                        button {
                                                            width: 12px
                                                              }
                                                              @media screen and (min-width: 1024px) {
                                                                button {
                                                                    width: 16px
                                                                      }
                                                                      }
                                                                      ```

                                                                      테일윈드는 각 건물 앞에 화면 크기의 접두사를 추가하는 간편한 반응 스타일링을 통합했다.

                                                                      ```js
                                                                      <button class="hidden md:w-12 lg:w-16"> hit me </button>
                                                                      ```

                                                                      삶이 훨씬 편해졌죠?

                                                                      <div class="content-ad"></div>