설치
Tailwind CSS는 모든 HTML 파일, JavaScript 컴포넌트, 그리고 다른 템플릿들을 스캔하여 클래스 이름을 찾고, 해당 스타일을 생성한 후 정적 CSS 파일로 작성합니다.
Tailwind CSS는 빠르고 유연하며 신뢰할 수 있습니다. 또한 런타임 오버헤드가 없습니다.
Tailwind CSS를 처음부터 시작하는 가장 간단하고 빠른 방법은 Tailwind CLI 도구를 사용하는 것입니다. Node.js를 설치하지 않고 사용하려면 독립 실행형 실행 파일로도 사용할 수 있습니다.
npm을 통해 tailwindcss와 @tailwindcss/cli를 설치하세요.
npm install tailwindcss @tailwindcss/cli메인 CSS 파일에 @import "tailwindcss";를 추가하세요.
@import "tailwindcss";소스 파일에서 클래스를 스캔하고 CSS를 빌드하기 위해 CLI 도구를 실행하세요.
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch컴파일된 CSS 파일을 <head>에 추가하고 Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요.
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>