[라이브러리]TailwindCss : 유틸리티 우선 CSS 프레임워크

# 개요

UI 키트의 규칙에 구속되지 않고, 반응형 UI를 달성할 수 있는 방법을 제공하는 CSS 프레임워크이다.

사용자 정의 사용자 인터페이스를 빠르게 구축하기 위한 유틸리티 우선 CSS 프레임워크입니다.

인라인 스타일을 작성하고, CSS 한줄 쓰지 않고도 멋진 인터페이스를 만들 수 있음

Q. Utility 우선이란?

Bootstrap과 다르게, Tailwind는 자동으로 스타일이 지정된 구성요소를 제공하지 않음

개별 유틸 클래스(bg-purple, text-white와 같이)를 통해, 특정방식으로 컴포넌트를 스타일링하는데 도움을 주는 것을 의미합니다.

# 설치

1. npm install tailwindcss --save-dev

2. npx tailwind init [filename] //Tailwind는 거의 전적으로 일반 JS로 구성됨, 프로젝트에 대한 Tailwind 구성파일을 생성해야함, Tailwind 구성 파일 생성

# 기본 사용 예제

<!-- BootStrap 예제 -->

<button class="btn btn-primary">Buy</button>

<!-- Below we have the Tailwind implementation of a simple button  -->

<button class="bg-purple hover:bg-purple-dark text-white font-bold py-2 px-4 rounded">Buy</button> //py : paddingY, px : paddingX

<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden"> //sm: small, md : medium, lg: large, xl : xlarge

  <div class="sm:flex sm:items-center px-6 py-4">

    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="#" alt="">

    <div class="text-center sm:text-left sm:flex-grow">

      <div class="mb-4"> //margin bottom?

        <p class="text-xl leading-tight">Adam Wathan</p>

        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>

      </div>

      <div>

        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>

      </div>

    </div>

  </div>

</div>

# 핵심 사용 예제

기본 사용 예제와 다르게, css 파일 상에 @apply 형식으로  지정 후, 간단하게 class에서 사용

<!-- Extracting component classes: -->

<button class="btn btn-blue">

  Button

</button>

<style>

  .btn {

    @apply font-bold py-2 px-4 rounded;

  }

  .btn-blue {

    @apply bg-blue-500 text-white;

  }

  .btn-blue:hover {

    @apply bg-blue-600;

  }

</style>

# Theme 커스터마이징

// tailwind.config.js

module.exports = {

  theme: {

    screens: {

      tablet: '768px',

      desktop: '1024px', //크기 관련 utility 클래스의 값을 지정 가능

    },

    colors: {

      primary: {

        100: '#ebf8ff',

        300: '#90cdf4',

        500: '#4299e1',

        700: '#2b6cb0',

        900: '#2a4365', //색상, step 컬러 관련 utility 클래스의 값을 지정 가능

      },

      secondary: {

        100: '#fffff0',

        300: '#faf089',

        500: '#ecc94b',

        700: '#b7791f',

        900: '#744210',

      },

    },

    extend: {

      boxShadow: {

        huge: '0 30px 60px -15px rgba(0, 0, 0, .25)'

      }

    }

  }

}

# 출처 

- https://tailwindcss.com/

- https://365ok.co.kr/tj/okdown/4255#:~:text=Tailwind%20CSS%20%EB%9E%80%20%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88%EA%B9%8C,%EB%A9%8B%EC%A7%84%20%EB%B0%A9%EB%B2%95%EC%9D%B4%EB%9D%BC%EA%B3%A0%20%EC%83%9D%EA%B0%81%ED%95%A9%EB%8B%88%EB%8B%A4.