[Nuxt3, TailwindCss, TS] 기본 설정

안녕하세요 상훈입니다.

 

Nuxt 3 (+Vue 3) 와 Tailwindcss, typeScript로 프로젝트 생성시 정상적으로 안되는 경우가 있어 정상구동을 확인한 간단한 기초 내용을 포스팅하려고 합니다.

1) Nuxt.js 3
2) Vue.js 3
3) TailwindCss
4) TypeScript
5) Vue Router
6) Vuex
7) gh-pages

를 기본적으로 사용하려고 합니다. ( *5,6,7 은 선택사항 입니다.)

 

1. 디렉터리 구조

디렉터리 구조

 

2. nuxt.config.ts

//nuxt.config.ts

export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

 

3. postcss.config.js

//postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

 

4. tailwind.config.js

// tailwind.config.js

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

5. tailwind.css (기호에 따라 파일명 설정 index.css, main.css 등)

// assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

 

이렇게 설정하고 구동시 정상출력을 확인하였습니다.

정상구동 확인