Tailwind CSS home page
  1. 시작하기
  2. Astro에서 Tailwind CSS 설치

  1. 프로젝트 생성

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

    Terminal
    npm create astro@latest my-projectcd my-project

  2. Tailwind CSS 설치

    astro add 명령어를 실행하여 tailwindcss와 @astrojs/tailwind를 설치하고 tailwind.config.cjs 파일을 생성하세요.

    Terminal
    npx astro add tailwind

  3. 빌드 프로세스 시작

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

    Terminal
    npm run dev

  4. 프로젝트에서 Tailwind 사용 시작

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

    index.astro
    <h1 class="text-3xl font-bold underline">
  Hello world!
</h1>