[TIL] Tailwind CSS 기초 - 5 (Just-in-Time, tailwind.config.ts, globals.css, plugin)

👉🏼 KIM·2024년 11월 22일

Just-in-Time Mode Tailwind CSS daisyui globals.css plugin tailwind.config.ts

TIL

목록 보기

41/54

오늘 공부한것 & 기억하고 싶은 내용

TailWind는 기존의 css 프레임워크처럼 고정된 css파일을 사용하는 것이 아니라, 유틸리티 클래스 기반의 접근 방식을 사용하고, 다음과 같은 특징을 갖고 있다. (요청에 따라 생성되는 것임)

특징

미리 정의된 유틸리티 클래스 제공

text-center bg-blue-200 flex처럼 사소한 스타일부터 레이아웃까지 쉽게 정의할 수 있는 클래스가 존재한다.

JIT(Just-In-Time) 컴파일러

테일윈드 최신버전은 JIT 컴파일러를 사용한다. 사용자가 html에서 작성한 클래스 이름을 기반으로 필요한 css만 실시간으로 생성한다. 따라서 미사용 클래스에 대한 불필요한 CSS는 포함되지 않는다.

사용자 정의 클래스 동작

tailwind는 미리 정의된 클래스 규칙을 기반으로 동작한다.

사용자 정의 클래스 지원

tailwind는 html/jsx 등의 코드에서 특정 클래스명을 탐지하여 필요한 css를 추출한다. 만약 테일윈드의 문법과 관계없는 클래스를 사용하려면 @apply 또는 custom css로 정의해야한다.

확장성

테마나 플러그인을 통해 기존 기능을 확장하거나 커스터마이징이 가능하다.

Just-in-Time Mode

테일윈드 내 정해진 클래스명을 탐지하여 필요한 css를 추출하지만 [ ]를 사용하면 어떤 값도 보여줄 수 있다. h-10이 아니라 h-[345.178px]도 가능한 것이다.
대괄호안에 넣으면 바로 해당 값이 css에 적용된다. 꼭 단위를 표함해야하는 것을 잊지 말도록! (px, em, rem 등)
숫자와 문자 조합도 가능하다.
일부 지원되지 않는 속성도 있을 수 있다.

<div class="bg-[rgba(255,0,0,0.5)] w-[345.178px]"></div>
//배경색: rgba(255,0,0,0.5)
//너비: 345.178px

Tailwind 설정 파일 (tailwind.config.ts)

Tailwind compiler가 class name을 찾을 위치를 알고 있는 이유는 바로 tailwind.config.ts 파일 덕분이다.

  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],

just in time compiler에게 page, components, app 경로에서 검색하도록 지시하고 있는 코드.
어떤 폴더든, 어느 파일이든 확장자가 js, ts, jsx, tsx, mdx인 것들을 컴파일러가 다 확인해서 클래스명을 생성하게 된다.
기존에 없는 스타일을 저장해서 반복적으로 사용하고 싶다면 theme: {}에 넣어주면 된다.

theme: {
  extend: {
    margin: {
          "top-a-lot":"1220px",
      }
      borderRadius: {
          "border-name11":"11.11px",
      }
  }
}

//margin: 1220px
//border-radius: 11.11px

extend를 쓰고 그 안에 반본되는 걸 만들어주면 된다. 11.11px을 많이 쓸거 같으면 저렇게 만들고 이름을 생성해줬다.(border-name11)
rounded-border-name11 / m-top-a-lot
위처럼 수치를 새로 만들어주면 자동 완성으로 mtop뿐만 아니라 그 수치에 맞게 상단좌우 등의 영역 모두 다 생성이 된다.

globals.css

이 파일 안에 있는 코드들을 directive라고 한다.
이 코드들은 서로 다른 일을 하고, 사용자는 이것들을 확장할 수 있다.

@tailwind base; //기본적인 스타일 초기화
@tailwind components; //컴포넌트 스타일
@tailwind utilities; //유틸리티 클래스

base directive

컴파일러가 tailwind와 함께 제공되는 기본적인 스타일 종류를 두는 곳
base를 삭제하면 전체적으로 티는 안날 수 있으나 margin이나 padding 등 기본적인 reset 파일이 사라지게 되는 것이고, 브라우저의 기본적인 스타일만 남게 됨

utilities directive

컴파일러가 생성된 css를 두는 곳.
컴파일러는 모든 utility 클래스네임들을 넣을 것이다. 모든 코드를 넣는 placeholder라고 생각하면 됨
ex) w-full, max-w-screen-sm 등 기본 정의된 클래스들
utilities를 삭제하면 모든 스타일이 사라진다.

apply directive

클래스네임들을 나의 css 사용할 수 있게 해주는 것이다.
반복적인 스타일을 재사용할 수 있게 만든다.

//globals.css

.btn {
	@apply w-full bg-black h-10 text-white
}

위 코드처럼 만들어두면 마크업할때
만으로도 저 스타일이 먹힌다.
리액트에서 보면 컴포넌트를 만드는 것과 같은 역할을 한다.
테일윈드 코드로 저장해놔도 css로 자동변환 해주기 때문에 편하다.

layer directive

위에 선언되어 있는 것들을 각각 확장할 수 있도록 해준다.
base style을 추가하고 싶다면 base layer를 확장하면 된다.
apply를 결합할 수 있다.

@layer base {
	a {
    	@apply text-blue-500
    }
}

모든 a는 파란색이어야 한다는 추가사항을 base에 넣었다.

@layer utilities {
	.text-bigger-hello {
    	@apply text-3xl font-semibold;
    }
}

@layer components {
	.btn {
    	@apply w-full bg-black h-10 text-white
    }
}

components directive

plugin을 넣어서 사용 가능
대표적으로 daisyUI가 있다. form 스타일이나 여러 대표적인 스타일이 있음

npm i -D daisyui@latest

 //...
  plugins: [
    require('daisyui'),
  ],

확장성을 위한 plugins(tailwind.config.ts 안에 사용)

globals.css의 base layer와 utilities layer와 components layer를 확장하는 역할을 한다.
플러그인에 공유하고 싶은 코드를 넣으면 자동으로 새 conponents나 utility나 base reset을 주입한다.
테일윈드 사이트에 가면 만들어져 있는 플러그인이 있다. (참고: https://tailwindcss.com/docs/plugins#official-plugins)
daisyUI는 tailwind CSS를 위한 좋은 멋진 components 라이브러리이다. https://daisyui.com
tailwindcss/forms: 유틸리티를 사용하여 form 요소를 쉽게 재정의할 수 있도록 form 스타일에 대한 기본 reset을 제공하는 플러그인이다.

npm install -D @tailwindcss/forms
https://github.com/tailwindlabs/tailwindcss-forms

plugins: [require("@tailwindcss/forms")]

배운점 & 느낀점

초반에 modifier에 대해서 배우다가 오늘은 뭔가 초기 개념(?)을 배운 느낌.
이론적으로 볼때는 좀 어렵긴한데, 어쨋든 이미 만들어져 있는 코드들이 방대하고 심지어 플러그인까지 존재한다니 어려웠던 디자인에 한걸음 더 앞으로 다가갈 수 있을 거 같다.
특히 플러그인만 설치해주면 아름다운 디자인들이 나를 기다리고 있으니.... 초반엔 테일윈드 클래스이름으로 구현하다가 나중엔 플러그인을 통해서 더 예쁜 페이지를 만들것이다.