Tailwind CSS 첫인상과 사용하며 느낀점

첫 인상

1. 그냥 알고있는 css를 바로 못쓰고 Tailwind의 문법에 맞게 찾아서 사용해야하는게 어색하다
   • 익숙해지기 전까지는 생산성에 좋은 영향을 주지는 못할 것 같다
2. 그럼에도 불구하고 문법 자체는 간결하게 잘 해놓았다는 생각이 들었다
   • 익숙해지면 그냥 css보다는 더 빠르게 UI작업이 가능할 것으로 보다
   • 단, 러닝커브가 좀 있을 것 같다는 느낌은 들었다

공식 문서에 적혀있는 Tailwind와 이에 대한 나의 생각

1. html 마크업과 css디자인을 동시에 가능하게 해서 빠른 생산성을 제공한다

🤔 Tailwind CSS가 제공하는 핵심적인 가치인 것 같다

2. 클래스 이름을 정해줄 필요가 없다
   → BEM같은 css이름을 정해주는 컨벤션이 있는데 그런걸 고려할 필요가 없다

🤔 Styled-Component를 생각해보면 이름 짓기 힘들긴하다 ( Container, Wrapper, etc … )

그래도 styled-component에서 명시적으로 이름 짓는건 그것 나름대로 장점이 있다고 생각하기 때문에 이부분에 대해서는 진짜 장점인지는 잘 모르겠다.
(어떤 기능 또는 스타일을 입힌 element인지 변수명으로 알 수 있음)

3. 빌드시에 필요없는 CSS는 모두 제거를 해주기 때문에 번들크기가 매우 작다.

🤔 확실한 장점인 것 같다

4. hover, media 쿼리 같은 부분에 있어서 정말 간결해진다.

🤔 이것도 일반 CSS와 비교했을 때 Tailwind CSS가 갖는 확실한 장점인 것 같다

사용전 느낌 정리

	Styled Component	Tailwind
코드 가독성	👍
코드 재사용성	👍
생산성 (익숙하다는 가정)	(CSS)	(Tailwind CSS) 👍
성능 (번들 크기)		👍
동적 스타일링	👍

새로운 패러다임 (?)

Tailwind CSS 공식 문서

필자가 Tailwind CSS의 핵심 컨셉이라고 생각하는 부분

그동안의 프론트엔드에서 UI 구현이라고 한다면 HTML 마크업 + CSS 디자인이었던 것 같다.
하지만 최근 프론트엔드 트렌드는 이 두가지 작업을 하나로 생각하려고 하는 것 같다.

Padding(
  padding: const EdgeInsets.only(top: 30),
      child: Column(
        children: [
          Expanded(
              child: ( ... )

위 코드는 컴포넌트를 작성하는 간단한 Flutter코드를 가져온 것이다.
코드를 보면 Padding이라는 컴포넌트안에 child가 Column 방향으로 들어가 있고, Column의 자식 컴포넌트들이 추가로 들어가 있다.

정확히 코드가 어떻게 동작하는지는 알 수 없지만 마크업과 디자인이 하나로 묶여있다는 느낌은 확실히 느낄 수 있을 것이다.
요즘 프론트엔드 개발의 패러다임이 이런식으로 변화하고 있다고 생각하였고, 이러한 패러다임의 변화가 Tailwind CSS가 크게 유행하게된 이유라는 생각이 들었다.

만약 웹에서 Scroll을 스타일링 해주는 재사용 가능한 스타일 코드가 있다면 기존에는 이걸 하나의 스타일 코드로써 구현하고 다른 파일에서 import 해서 사용하는 방식이었다면 요즘에는 스타일을 적용시킨 하나의 컴포넌트를 만들고 해당 컴포넌트를 불러와서 사용해주는 방식을 선호하는 것 같다.

function Button ({size, bgColor, textColor, children}) {
	const style = size === 'sm' ? 'text-xs' : 'text-xl' 
    return (
        <button className=`${style} text-${textColor} font-bold py-2 px-4 rounded`>
        {children}
    </button>
    )
};

export default Button;

위와 같이 하나의 재사용 가능한 컴포넌트를 스타일과 함께 엮어주면 스타일 코드를 재사용하는 것과 크게 다르지 않을 것 같다는 생각이 들었다.

이러한 패러다임을 기준으로 생각을 해보니 스타일에 이름을 붙이는게 불필요해보이고 Styled-Component(기존 CSS 패러다임) 들의 장점이 장점은 맞는데 굳이 필요가 없어지는 듯한 느낌이 들었다.

결론

1. Tailwind CSS 괜찮은 것 같다 !!
2. 다만, 아직 제공해주는 개발 경험이 완성도가 높지는 못하다는 느낌이 들었다.
   • Tailwind CSS 의 문법을 미리보여주는 VSCode 확장프로그램이 스페이스를 눌러야만 보임
   • vertical 방향으로 margin을 주는 경우와 left 또는 right 방향으로 margin 을 주는 경우 충돌이 있어서 둘중 하나의 스타일만 적용이 될 텐데 개발자에게 보여주는 어떤한 문구도 없음
     • 기본적으로 inline으로 되어있기 때문에 일반적인 CSS에 비해 찾기 힘들 것 같음
3. 이를 극복하기 위한 다른 확장 프로그램을 도입하는 것도 고려해볼만 할 것 같다.
   • Headwind라는 확장 프로그램은 tailwind의 순서를 보기좋게 고쳐준다.
   • 어떤 스타일이 적용되었는지 디버깅을 할 때 유용할 것 같음.

참고 자료

Tailwind CSS 사용기 | 카카오엔터테인먼트 FE 기술블로그

카카오웹툰은 CSS를 어떻게 작성하고 있을까? | 카카오엔터테인먼트 FE 기술블로그