Qwik에 Tailwind CSS 설치하기

Qwik 프로젝트에 Tailwind CSS 설정하기.

프로젝트 생성

아직 프로젝트가 설정되지 않았다면 새로운 Qwik 프로젝트를 생성하세요. 가장 일반적인 방법은 Create Qwik을 사용하는 것입니다.

터미널

npm create qwik@latest empty my-projectcd my-project

Tailwind CSS 설치

npm을 통해 @tailwindcss/vite와 그에 필요한 의존성을 설치하세요.

터미널

npm install tailwindcss @tailwindcss/vite

Vite 플러그인 설정

Vite 설정에 @tailwindcss/vite 플러그인을 추가하세요.

vite.config.ts

import { defineConfig } from 'vite'import { qwikVite } from "@builder.io/qwik/optimizer";import { qwikCity } from "@builder.io/qwik-city/vite";// …import tailwindcss from '@tailwindcss/vite'export default defineConfig(({ command, mode }): UserConfig => {  return {    plugins: [      tailwindcss(),      qwikCity(),      qwikVite(),      tsconfigPaths(),    ],    // …  }})

Tailwind CSS 임포트

./src/global.css에 Tailwind CSS를 임포트하는 @import를 추가하세요.

app.css

@import "tailwindcss";

빌드 프로세스 시작

npm run dev로 빌드 프로세스를 실행하세요.

터미널

npm run dev

프로젝트에서 Tailwind 사용 시작

Tailwind의 유틸리티 클래스를 사용하여 콘텐츠를 스타일링하세요.

index.tsx

import { component$ } from '@builder.io/qwik'export default component$(() => {  return (    <h1 class="text-3xl font-bold underline">      Hello World!    </h1>  )})