Tailwind CSS home page
  1. 설치
  2. Nuxt에서 Tailwind CSS 설치

  1. 프로젝트 생성

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

    터미널
    npx nuxi init my-projectcd my-project

  2. Tailwind CSS 설치

    tailwindcss와 그 동반 의존성을 npm으로 설치한 후, tailwind.config.js 파일을 생성하기 위해 init 명령어를 실행하세요.

    터미널
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init

  3. PostCSS 설정에 Tailwind 추가

    nuxt.config.js 파일의 postcss.plugins 객체에 tailwindcss와 autoprefixer를 추가하세요.

    nuxt.config.js
    // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

  4. 템플릿 경로 설정

    tailwind.config.js 파일에 모든 템플릿 파일의 경로를 추가하세요.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  5. CSS에 Tailwind 지시자 추가

    ./assets/css/main.css 파일을 생성하고 Tailwind의 각 레이어에 대한 @tailwind 지시자를 추가하세요.

    main.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. CSS 파일을 전역으로 추가

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

    nuxt.config.js
    // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

  7. 빌드 프로세스 시작

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

    터미널
    npm run dev

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

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

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