CSS 말고 Tailwind 쓰기 _ 코딩애플

코딩애플 유튜브 영상을 보고 정리한 내용입니다.

기본 css 를 사용해 스타일을 적용하려면 아래 과정을 거쳐야 합니다.

// html 파일의 태그에 class 이름 적어 놓고

<div>
    <p class="main-title">테일윈드</p>
</div>

// css 파일에서 스타일을 적어줌

.main-title {
    margin-top: 40px;
}

더 간편한 스타일 방법으로 유틸리티 클래스를 쓰는 방법이 있습니다. CSS 파일에 자주 쓰는 속성값을 클래스명으로 지정해두면,

// css 파일

.m-1 { margin-top : 10px }
.m-2 { margin-top : 20px }
.m-3 { margin-top : 30px }
.m-4 { margin-top : 40px }

.text-sm { font-size : 12px }
.text-lg { font-size : 18px }
.text-xl { font-size : 24px }

해당 속성값이 필요할 때 그 클래스명만 넣어서 스타일을 적용할 수 있습니다.

// html 파일

<div>
    <p class="m-3 text-lg">테일윈드</p>
</div>

tailwind 는 이런 유틸리티 클래스 수백개를 모아놓은 라이브러리입니다. 라이브러리를 사용하면 class 명을 지정하고 해당 클래스에 속성값을 주는 방식이 아니라서 스타일 작성 속도가 훨씬 빨라집니다.

일반적인 방식이라면 이렇게 작성할 것을

// html

<div class="form-box">
    <input class="form-input" placeholder="Email">
    <button class="form-button">
        Sign in
    </button>
</div>

// css

.form-box {
    padding : 20px;
}
.form-input {
    padding : 15px 10px;
    border : 1px solid lightgray;
    border-radius : 8px;
}
.form-button {
    padding : 15px 20px;
    background : #333;
    boder : none;
    border-radius: 8px;
    color: white;
}

tailwind 를 사용하면 이렇게 줄일 수 있습니다.

// html

<div class="p-3">
    <input class="p-2 border border-gray-300 rounded-md" placehoder="Email">
    <button class="py-2 px-4 rounded-md text-white bg-indigo-6">
        Sign in
    </button>
</div>

그 외에 특정 조건일 때만 적용하는 클래스명도 있습니다.

<p class="md:m-4">안녀하세요</p>
// 브라우저 폭 768px 이상에서만 m-4 적용

<p class="hover:m-4">안녕하세요</p>
// 마우스 호버시 적용

<p class="dark:m-4">안녕하세요</p>
// 다크모드일 때 적용

설치 방법과 각종 클래스 이름 아래 사이트에서 확인 가능합니다.
https://tailwindcss.com/docs/flex