Nuxt에서 Tailwind CSS 설치하기

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

프로젝트 생성

아직 프로젝트가 설정되지 않았다면 새로운 Nuxt 프로젝트를 생성하세요. 가장 일반적인 방법은 Nuxt 커맨드라인 인터페이스를 사용하는 것입니다.

Terminal

npx nuxi init my-projectcd my-project

Tailwind CSS 설치

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

Terminal

npm install tailwindcss @tailwindcss/vite

Vite 플러그인 설정

Nuxt 설정 파일에 @tailwindcss/vite 플러그인을 Vite 플러그인으로 추가하세요.

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({  compatibilityDate: "2024-11-01",  devtools: { enabled: true },  vite: {    plugins: [      tailwindcss(),    ],  },});

Tailwind CSS 임포트

./assets/css/main.css 파일을 생성하고 Tailwind CSS를 임포트하는 @import를 추가하세요.

main.css

@import "tailwindcss";

CSS 파일을 전역으로 추가

새로 생성한 ./assets/css/main.css 파일을 nuxt.config.ts 파일의 css 배열에 추가하세요.

nuxt.config.ts

import tailwindcss from "@tailwindcss/vite";export default defineNuxtConfig({  compatibilityDate: "2024-11-01",  devtools: { enabled: true },  css: ['~/assets/css/main.css'],  vite: {    plugins: [      tailwindcss(),    ],  },});

빌드 프로세스 시작

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

Terminal

npm run dev

프로젝트에서 Tailwind 사용 시작

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

app.vue

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