특징

획일화된 UI

이미 디자인 된 디자인 시스템을 통해서 클래스명을 통해 스타일을 입힌다. (획일화된 UI)

간편한 사용

간편하게 반응형 또는 hover, focus 같은 상태에 대한 css를 적용한다.
반응형의 경우 앞에 sm: lg: 와 같은 prefix를 통해서,
상태는 hover: focus: 와 같은 prefix를 통해서 적용할 수 있다.

프로젝트에 적용하기

create-next-app 할 때 설정하기

터미널에서 프롬프트 입력해서 선택할 수 있어서 제일 간단한 방법이다.

npm으로 다운로드하기

라이브러리 받기

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

설정파일 작성하기

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

css 파일에 레이어 추가하기

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

스타일링하기

컴포넌트에 직접 스타일링하기

return (
	<div className='py-4 px-8'>
		// ...
	</div>
)

css 파일에 클래스명으로 스타일링하기

return (
	<div className='my-btn'>/* ... */</div>
)

.my-btn {
	@apply px-3 py-1 rounded-md 
}

custom 스타일링하기

테일윈드의 1은 4px을 의미한다.
만약 다른 픽셀값을 주고싶다면 대괄호 안에 넣어준다.

.my-class {
    @apply py-[15px] px-[7px]
}