22sook00 logo
SookDev
✍🏻
SookDev/
🌬️
테일윈드가 왜 좋냐고 물으신다면 ,, ..
🌬️

테일윈드가 왜 좋냐고 물으신다면 ,, ..

tag
style
css
date
Mar 10, 2024
SASS
SASS는 2006년부터 시작하여 가장 오래된 CSS 확장 언어이다.
순수 css 는 작업의 고도화가 진행될 수록 사용하기 불편하다.
가령, 불필요한 선택자의 계속되는 사용, 연산자와의 결합 등 이 불가하기 때문이다. 웹에서는 표준 css 만 사용 가능하므로 css 가 동작하기 전 확장기능과 컴파일 시켜 이러한 불편함들을 해소시킬 수 있다.
이를 바로 흔히 들어봤을 법 한 “전처리기" 라고도 한다.
우리가 사용해왔던 sass 또는 less 는 사실 css 와 문법이 비슷할 뿐, css 가 아닌 전처리기 이다.
앞서 말했듯이 웹에서는 표준 CSS 만 받아들이기 때문에 전처리기만 사용한다면 적용되지 않는다.
퍼블리싱 시 필요한 연산자 , 조건문 , 반복문 , 중첩처리 등 많은 기능을 사용하려면 css와 컴파일하여 동작하도록 해야 하는데 이 컴파일러의 종류가 SCSS 인 것이다.

Tailwindcss

Utility-First 컨셉을 가진, 인라인 스타일을 사용하며, bottom-up 방식으로 css를 만들수 있는 프레임워크.
부트스트랩과 비슷하게 m-1, flex 와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로,
HTML 코드 내에서 스타일링을 할 수 있다.

설치방법

이번 글은 테일윈드를 왜 선호하는지에 대해 생각을 정리한 글이므로 설치방법은 공식문서 링크로 대체한다.
전혀 어렵지 않으니 공식문서에 나와있는대로 해보면 된다.
Install Tailwind CSS with Create React App - Tailwind CSS
Documentation for the Tailwind CSS framework.
Install Tailwind CSS with Create React App - Tailwind CSS
https://tailwindcss.com/docs/guides/create-react-app
Install Tailwind CSS with Create React App - Tailwind CSS

특징

  • 쉽고 빠른 스타일링으로 style을 짧게 표현 가능하여 생산성이 높음.
  • 일관된 디자인 시스템
  • Production 에는 실제로 사용하는 css만 포함되어 작은 css파일을 유지 가능.
  • 좋은 사용자 경험으로 사용성 증가추세
notion image
notion image

Tailwind CSS의 장점

1. Utility-First의 편리함과 빠른 개발

스타일 코드도 HTML 코드 안에 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없다.
⇒ HTML-CSS를 왔다갔다하며 시간을 쓰거나 화면을 분할해서 사용하지 않아도 된다. 
⇒ 태그의 스타일을 변경하기 위해 클래스명을 검색해가며 일일이 필요한 CSS 코드를 찾지 않아도 된다.
⇒ styled-component 처럼 작은 스타일 변경에도 컴포넌트를 만들어야 하는 번거로움을 줄인다.
⇒ 매번 클래스명을 짓지 않아도 된다.
BEM, OOCSS 등의 방법론이 나올 정도로 클래스명 짓는 일은 까다롭다.
Tailwind CSS를 사용하면 랩핑 태그의 클래스명을 사용할 일이 거의 없으므로 container, wrapper, inner-wrapper와 같은 클래스명을 고민하지 않아도 된다.
[참고_css 방법론 3가지]
CSS방법론 : OOCSS, BEM, SMACSS 비교해보기
이전에 CSS 방법론 중 하나인 BEM 에 대해서 정리를 한 적이 있습니다. 현재 CSS방법론이라고 사람들이 말하는 것은 크게 3가지로 구분됩니다. 자세한 방법론에 대한 서술보다는 해당 방법론이 어떻게 다른지 또 어떠한 장점과 단점을 가지고 있는지 알아보도록 할게요. 3가지 방법론 중 무엇하나 정답이라고 말할 수 없으며 공부를 하다 보면 자신에게 맞는 방법론이 보이게 됩니다.
CSS방법론 : OOCSS, BEM, SMACSS 비교해보기
https://whales.tistory.com/33
CSS방법론 : OOCSS, BEM, SMACSS 비교해보기

2.일관된 디자인

모든 곳에서 동일한 색상이나 사이즈, 간격 등의 유틸리티 클래스를 사용 하므로 일관된 스타일로 구현할 수 있다.
notion image

3. 쉬운 반응형 페이지 및 커스터마이징

다른 프레임워크들에 비해 기본 스타일 값을 디테일한 부분까지 쉽게 커스텀이 가능하다.
커스텀을 할 때 기본 스타일 값을 수정하는 방식이기에 디자인 일관성도 해치지 않는다.
반응형또한 제공해주고 있어 별도로 미디어쿼리를 적용하지 않아도 인라인스타일로 쉽게 지정할 수 있다.
notion image
중복되는 스타일은 @apply 로 지정하여 전역에서 지정한 클래스네임으로 동일한 스타일을 지정할 수 있음.
notion image

4. Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 익스텐션으로 자동완성 가능
notion image
notion image

JavaScript 코드와의 분리

Tailwind CSS는 JavaScript 코드와 완전히 분리되어 있다. 그러므로 프로젝트 진행 도중 JavaScript 프레임워크를 변경하여도 큰 추가 작업 없이 기존의 HTML 코드를 그대로 쓸 수 있다.

Tailwind CSS의 단점

1. 못생긴 코드

인라인태그로 작성하다 보니 코드가 조잡해 보여 익숙하지 않은 초반엔 가독성이 떨어지기 쉽다.

2. 초반 클래스명 러닝 커브

대부분의 클래스명이 기존 CSS 와 유사하나, 정확한 각 스타일의 클래스명을 익히기 위해 초반에는 문서를 참고해야한다. 하지만 계속 사용하다 보면 익숙해지고, 자동완성 익스텐션인 Tailwind CSS IntelliSense 를 사용하면 해결 가능하다.

3. HTML와 CSS 코드 혼재

장점이자 단점이 될 수 있는 부분.
HTML와 CSS의 관심사 분리가 이루어지지 않는다는 점에서 관점에 따라 단점이 될 수 있다.

Tailwind CSS 와 같이 쓰면 좋은 라이브러리

🤯 headlessUI

Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Headless UI
https://headlessui.dev/
Headless UI
  • react / vue 제공
  • Dropdown / Select / Toggle / Modal / Transition / Tab 최근 Autocomplete 까지 추가.

😋 HeroIcons

Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Heroicons
https://heroicons.com/
Heroicons
  • react / vue 제공
  • svg 아이콘 제공, tailwind 로 아이콘 커스터마이징 가능
//basic
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

//react
import { BeakerIcon } from '@heroicons/react/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}