Next.js 14에서 Tailwind CSS 직접 적용해보기
·
Next.js
1. Tailwind CSS클래스 기반으로 스타일을 지정하는 CSS 프레임워크장점클래스 기반으로 스타일을 지정해서 HTML 코드를 작성할 때 더 빠르게 스타일 적용 가능사전 정의된 유틸리티 클래스로 새로운 스타일을 만들지 않고 빠르게 작업 가능구성 가능한 많은 옵션을 제공하여 프로젝트의 디자인 시스템에 맞게 쉽게 조정 가능단점클래스 기반의 스타일 지정 방식은 기존의 CSS 작성 방식과 다르기 때문에 익숙해지는데 시간이 걸림HTML 파일에 많은 클래스 추가로 파일 크기가 커질 수 있다.서버 사이드 렌더링 서버 사이드 렌더링을 하더라도 Tailwind 클래스를 적용하여 일관된 스타일을 유지할 수 있다.빌드 단계에서 CSS로 컴파일되므로 서버 사이드 렌더링 시에도 문제 없이 사용할 수 있다.2. styled-..