설치
Tailwind CSS는 모든 HTML 파일, JavaScript 컴포넌트, 그리고 다른 템플릿들을 스캔하여 클래스 이름을 찾고, 해당 스타일을 생성한 후 정적 CSS 파일로 작성합니다.
Tailwind CSS는 빠르고 유연하며 신뢰할 수 있습니다. 또한 런타임 오버헤드가 없습니다.
Tailwind CSS를 PostCSS 플러그인으로 설치하면 Next.js나 Angular 같은 프레임워크와 가장 자연스럽게 통합할 수 있습니다.
npm을 통해 tailwindcss, @tailwindcss/postcss, 그리고 postcss를 설치하세요.
npm install tailwindcss @tailwindcss/postcss postcsspostcss.config.mjs 파일이나 프로젝트에서 PostCSS가 설정된 위치에 @tailwindcss/postcss를 추가하세요.
export default { plugins: { "@tailwindcss/postcss": {}, }}CSS 파일에 Tailwind CSS를 임포트하는 @import를 추가하세요.
@import "tailwindcss";npm run dev나 package.json 파일에 설정된 커맨드로 빌드 프로세스를 실행하세요.
npm run dev컴파일된 CSS가 <head>에 포함되어 있는지 확인하세요 (프레임워크가 이를 처리해 줄 수도 있습니다), 그런 다음 Tailwind의 유틸리티 클래스를 사용해 콘텐츠를 스타일링하세요.
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/styles.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>