why tailwindcss ?

많은 사용자들이 인라인 스타일 부트스트랩을 사용하는데, 사용률이 높은 부트 스트랩은 사용자의 만족도가 떨어진다는 의견이 많았다.

하지만 tailwindcss의 경우, 전체적인 사용률 낮지만 사용자 만족도는 높았다.

어떤 부분에서 사용자들이 만족하였는지 알아보자.

1. 유틸리티 클래스 사용

• 간단하고 직관적인 클래스 명을 사용하여 css를 적용할 수 있다.
• 이후에 코드를 다시 보았을 때에도 이 마크업에 어떤 스타일이 적용되었는지 확인하기가 용이하다.

2. 불필요한 CSS 요소 자동 제거

• 해당 마크업에 필요한 css를 선언하기 때문에 불필요한 css를 줄일 수 있다.
• 그 결과 css 파일의 용량을 줄여 프로젝트 성능을 높일 수 있다.

💡 실제로 넷플릭스는 넷플릭스 Top 10 사이트에서 tailwindcss를 사용하여 css 용량이 7.7kb밖에 되지 않는다.

3. 직관적인 반응형 웹 구현

• 기본적으로 Mobile First 디자인을 가지고 있다.
• sm, md 이런 클래스에 콜론을 붙여 특정 브라우저 크기일 때, 스타일을 줄 수 있다.

💡 단, md: 이런식으로 각각 클래스를 따로 적어줘야 해서 여러분 적용해야할 경우가 생기기도 한다.

4. 기존 클래스에 커스텀 클래스 사용 가능

• tailwindcss.config.js 파일에가서 커스텀 클래스 선언을 해줘서 본인이 원하는 클래스 설정하여 tailwindcss에서 사용할 수 있다.
• 만약 이런 경우로 추가해주지 않더라도 인라인 스타일에서 직접 커스텀 클래스를 사용할 수 있다.

<div class="w-[200px]"></div>

• 위 처럼 [] 대괄호를 사용하여 커스텀 클래스를 줄 수 있다.
• 가급적 변수는 영어로 해주고 기존 클래스와 구분을 위해서라면 앞글자는 대문자로 사용해주는 것을 추천한다.

💡 위와 같은 부분을 디자이너에게 직접 요청해주면 업무가 편해질 수 있다.

module.exports = {
  content: ["./src/**/*.html"],
  darkMode: "class",
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        "checkbox-default": "url('../images/checkbox-default.png')",
        "checkbox-checked": "url('../images/checkbox-checked.png')",
      }),
      colors: {
        gray1: "#333333",
        gray2: "#4f4f4f",
        gray3: "#828282",
        gray4: "#bdbdbd",
        gray5: "#e0e0e0",
        gray6: "#f2f2f2",
        gray7: "#f9f9f9",
        primary: "#ed234b",
      },
      fontFamily: {
        sans: ["Noto Sans KR", "sans-serif"],
      },
    },
  },
  plugins: [],
};

• 기존 칼라 사용하면서 추가하고 싶으면 extend:{} 안에다가 추가 색상을 넣어줘야한다.
• 단, export 방식 대신 node 방식으로 내보내야한다.

배경 이미지 커스텀

• 이전 버젼에서는 배경 이미지를 사용할 경우 직접 배경이미지를 extend에 다 추가해줬어야 했다.

• 새롭게 바뀐 tailwindcss에서는 다음과 같이 사용할 수 있다.

// tailwind.config.js
module.exports = {
	theme: {
    extend: {
      backgroundImage: (theme) => ({
        "checkbox-default": "url('../images/checkbox-default.png')",
        "checkbox-checked": "url('../images/checkbox-checked.png')",
      }),
}

// index.html
<label for="autoLogin" class="pl-6 bg-checkbox-default bg-no-repeat bg-left hover:bg-checkbox-checked">

• url 경로를 미리 지정해두고 원하는 구간에서 설정한 클래스로 선언할 수 있다.

Background Image - Tailwind CSS

5. 자동완성 기능

• vscode 익스텐션을 설치하여 자동완성 기능으로 기존 css처럼 편리하게 사용할 수 있다.

6. dark 모드 편리

<div class="flex items-start justify-center h-screen 
md:items-center text-gray1
 dark:text-white dark:bg-gray-900">

• 클래스에서 dark: 이런 식으로 설정하여 dark 모드 편리하게 설정할 수 있다.

<picture>
  <!-- 운영체제 테마 전환 모드 -->
  <source srcset="./images/fastcampus-logo-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset="./images/fastcampus-logo.png" media="(prefers-color-scheme: light)" />
  <!-- 커스텀 테마 전환 모드 -->
  <img src="./images/fastcampus-logo.png" alt="fastcampus" />
</picture>

• picture 태그안에서 source태그 쓸 때, media 속성에서 꼭 브라우저 크기 뿐만 아니라 dark 모드일 경우 스타일 줄 수 있다.

7. Sass vs Tailwindcss

추가로 저번 시간에 배운 Sass와 비교해보았을 때, 내가 느낀점은 다음과 같다.

1. Sass는 mixin을 설정해준 뒤 내가 나중에 사용법을 까먹을 수가 있을 텐데 tailwindcss는 상대적으로 그럴 경우가 적을 것 같다.
2. tailwindcss는 클래스명 짓는데 머리 덜 써도 되서 편하다.

오늘 알게된 Tip

1. br태그 마크업 없이 개행 하기

모바일에서는 “always beside you” 부분 다음 줄에 “EDIYA COFFEE” 글씨가 와야하고 데스크탑에서는 한줄로 나타내야하는데 그 방법을 몰라서 나는 width 값을 주어서 다음줄로 개행하였다.

<p>always beside you <span>ediya coffee</span></p>

• p태그 flex column 준다.
• span에다가 block을 줘서 줄바꿈 해줄 수 있다.

2. placeholder 색상의 비밀

placeholder는 컬러주어도 기본 50% 수준으로 나온다.

3. tailwindcss 컴포넌트화하여 재사용 가능 @apply

<input class="w-full border rounded-md border-gray5 p-4 outline-none dark:text-black" />

• 위 처럼 input 태그에 몰아서 적용하는 것 대신 @apply를 사용하여 따로 컴포넌트화 하여 재사용 가능하다.

/* input.css */
.input {
  @apply w-full border rounded-md border-gray5 p-4 outline-none dark:text-black;
}

<!-- index.html -->
<input class="input" />

4. tailwindcss 단점

4.1. 인라인 스타일요소의 선택자 한계

<input type=”checkbox”> 에서 checked가 되었을 때, label에 스타일을 주고 싶을 경우에는 input.css에 직접 가서 css 스타일을 설정해줘야 가능하다.

/* input.css */
.auto-login:checked + label {
  @apply pl-6 bg-left bg-no-repeat bg-checkbox-checked;
}