설치
Tailwind CSS는 모든 HTML 파일, JavaScript 컴포넌트, 그리고 다른 템플릿들을 스캔하여 클래스 이름을 찾고, 해당 스타일을 생성한 후 정적 CSS 파일로 작성합니다.
Tailwind CSS는 빠르고 유연하며 신뢰할 수 있습니다. 또한 런타임 오버헤드가 없습니다.
Tailwind CSS를 Vite 플러그인으로 설치하면 Laravel, SvelteKit, React Router, Nuxt, SolidJS와 같은 프레임워크와 쉽게 통합할 수 있습니다.
npm을 통해 tailwindcss와 @tailwindcss/vite를 설치하세요.
npm install tailwindcss @tailwindcss/viteVite 설정에 @tailwindcss/vite 플러그인을 추가하세요.
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})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>