Tailwindcss?

Tailwindcss 웹사이트 메인 페이지에 나와있는 tailwind 정의

• utility-first: class를 직접 만들어 css를 적용하는게 아니라 이미 만들어진 CSS용 class를 이용하여 html 요소에 적용하는 방식
• postcss 라이브러리의 플러그인

<div className='text-center'></div>

• text-center 는 이미 css가 적용되어 있는 유틸리티 클래스

postcss

// register.tsx

export default Register() {
  return (
    <form>
      <button className='submit'>register</button>
    </form>
  ) 
}

// login.tsx

export default Login() {
  return (
    <form>
      <button className='submit'>login</button>
    </form>
  )
}

postcss 적용 전

'register.css'
.submit {
  color: red
}

'input.css'
.submit {
  color: blue
}

적용 후

'register.module.css' 
.submit {
  color: red
}

'login.module.css'
.submit {
  color: blue
}

브라우저에서 확인

.submit {
  color: red
}
.submit_12a345 {
  color: blue
}

autoprefixer

• 브라우저 호환성을 위해 필요한 vendor prefix를 자동 지정
• https://poiemaweb.com/css3-vendor-prefix

'login.module.css'
.submit {
  color: blue
}

.submit {
  color: blue
  -webkit-color: blue
  -moz-color: blue
  -ms-color: blue
}

Tailwindcss의 장점

• 개발 속도 향상
• 클래스의 일관성
• 커스터마이징
• 적은 용량의 CSS 파일 사용
• 쉬운 반응형
• 여러 프론트엔드 프레임 워크나 라이브러리에 적용 가능 (React, Vue, Angular)

커스터마이징

• tailwind.config.js 에서 커스터마이징

// tailwind.config.js

const config = {
	theme: {
      extend: {
      	colors: {
          border: "hsl(var(--border))",
        }
      }
    }
}

hsl

• hue/saturation/lightness의 약자
• 컬러/강도/밝기
• https://hslpicker.com/#37cd23

.container {
  background-color: hsl(360deg, 100%, 100%)
}

css variable

• --변수명 같이 -- 로 시작
  
• var() 함수에 인자로 사용: var(--변수명)

'전역 스코프'
:root {
  color: var(--text3)
}

'지역 스코프'
.container {
  color: var(--text3)
}

쉬운 반응형

• tailwind는 기본 rem 단위 사용
• w-1: 0.25rem = 4px

<img class="w-16 md:w-32 lg:w-48" src="..." />

@media (min-width: 768px) {
  img {
    width: 128px
  }
}

rem

• root element
• html의 font-size 값
• 브라우저들의 기본 폰트값 16px
• 62.5% 는 10px
• 그냥 10px이 아니라 62.5%를 사용하는 이유: 디바이스 크기에 따른 상대 크기 적용

html {
  font-size: 62.5%; /* changes a default 16px font size to 10px */
}
h1 {
  font-size: 2.4rem; /* font size = 24px */
}
h2 {
  font-size: 1.6rem; /* font size = 16px */
}
p {
  font-size: 1.2rem; /* font size = 12px */
}