TailwindCSS 특징

tailwind Play 바로가기

정적 CSS를 작성하는 방식으로 동작하며, 런타임에 동작하지 않는다는 점에서 SSR 환경에서도 문제없이 동작해요. (zero-runtime)

전통적인 웹에서 스타일을 적용할 때는 css를 작성해야하지만, Tailwind를 사용하면 HTML에 유틸리티 클래스를 사용하여 스타일을 지정할 수 있어요.

인라인 스타일과 다른점

인라인 스타일에 사용하는 모든 값은 매직넘버가 되므로 tailwind의 유틸리티를 사용하면 일관된 UI를 쉽게 구축할 수 있어요.

특히, 반응형 유틸리티, 호버, 포커스 등을 tailwind에서는 쉽게 스타일링 할 수 있다는 특징이 있어요.

장점

• 클래스 이름을 만드는데 시간을 낭비하지 않을 수 있다.

• 불필요한 CSS 파일을 추가하지 않아도 된다.

• 유틸리티 클래스를 사용하여 HTML내에서 바로 스타일을 적용할 수 있고 반응형 디자인을 쉽게 구현할 수 있다.

단점

• tailwindCSS의 유틸리티 클래스를 익히는데 러닝커브가 있을 수 있다.

• HTML의 클래스 이름으로 나열하므로 복잡해지고 가독성이 떨어질 수 있다.

• 유틸리티 클래스만으로는 한계가 있을 수 있어 추가적으로 커스텀한 CSS가 필요할 수 있다.