Tailwind CSS | Notion

HTML과 CSS를 작성하는 데 사용되는 CSS 프레임워크

CSS 프레임워크를 쉽게 개발할 수 있게 해주는 저수준 프레임워크
PostCSS 버전 8의 플러그인 형태로 동작
Tailwind CSS 자체로는 btn btn-primary와 같이 class명으로 적용되는 css 컴포넌트를 제공하지 않음.
하지만 Tailwind CSS를 이용한 다양한 고수준 프레임워크가 플러그인 형태로 제공되며, 이를 이용 시 디자인이 적용된 CSS 컴포넌트를 쉽게 만들 수 있음. ex) daisyui
이를 통해 자체적으로 CSS를 작성하는 것보다 훨씬 빠르게 UI를 구축
빠른 프로토타이핑과 반응형 디자인을 제공
일관성있는 UI를 유지하고 코드를 재사용 가능

유틸리티 클래스 vs 인라인 스타일링

	유틸리티 클래스	인라인 스타일링
정의	한 가지 일만 하는 CSS 코드를 담고 있는 클래스로, 이를 조합하여 사용	HTML 요소의 style 속성을 사용하여 스타일을 지정
반응형 디자인	가능	불가능
**수도 클래스
(hover, focus 등 상태 변경)**	가능	불가능
**수도 엘리먼트
(before, after)**	가능	불가능
변경자
(first-child, last-child 등)	가능	불가능

Tailwind CSS 사용 방법

터미널에 다음 명령어를 입력하여 설치

npm i -D postcss [autoprefixer](<https://itmakesmesoft.notion.site/autoprefixer-2f478ef60aca4e5eb7445742e8484749>) tailwindcss

autoprefixer란?

구성파일 만들기
```
npx tailwindcss init -p
```
- 위 명령어를 실행하면 postcss.config.js 파일과 tailwind.config.js 파일이 생성됨

TailwindCSS 반영하기

src/index.css에 아래 3줄의 코드를 추가

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

...

TailwindCSS 플러그인 설치

daisyui 패키지 설치

npm i -D daisyui

tailwind.config.js 설정 파일에서 content부분과 plugins 부분 수정

module.exports = {
	content: [
		"./src/**/*.{js,jsx,ts,tsx}",
	],
	theme: {
		extend: {},
	},
	plugins: [require('daisyui')],
}

b. @tailwindcss/line-clamp 플러그인 설치

npm i -D @tailwindcss/line-clamp

tailwind.config.js 파일 plugins에 추가

module.exports = {
	content: [
		"./src/**/*.{js,jsx,ts,tsx}",
	],
	theme: {
		extend: {},
	},
	plugins: [require('@tailwindcss/line-clamp'), require('daisyui')],
}