Nuxt + tailwind 할때 tailwind.config.js 설정

헷갈리기 쉬웠던 부분이라 끄적여본다.

 

흔히들 tailwind를 쓴다고 하면 npx tailwindcss init해서 tailwind.config.js 파일을 생성해서

이것저것 tailwind에 관한 설정들을 하지만, @nuxtjs/tailwindcss를 이용하면 default 설정이 들어가 있어서

굳이 tailwind.config.js 파일 이나 tailwind.css을 안 만들어도 tailwind가 잘 먹힌다.

(tailwind.css 파일도 @nuxt/tailwindcss 안에 있음)

 

dist/runtime/index.js in @nuxt/tailwindcss

const defaultTailwindConfig = ({rootDir, srcDir}) => ({
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: [],
  purge: {
    content: [
      `${srcDir}/components/**/*.{vue,js,ts}`,
      `${srcDir}/layouts/**/*.vue`,
      `${srcDir}/pages/**/*.vue`,
      `${srcDir}/plugins/**/*.{js,ts}`,
      `${rootDir}/nuxt.config.js`,
      `${rootDir}/nuxt.config.ts`
    ]
  }
});

 

그리고 추가적인 설정을 해주고 싶은 경우에는 node_modules가 있는 폴더 계층에 tailwind.config.js 파일을 두면 된다.

nuxt의 경우에는! 굳이 다른 폴더 계층에 두고싶은 경우에는 nuxt.config.{ js, ts} 에 설정을 추가하면되는데,

  tailwindcss: {
    configPath: '~~/tailwind.config.js',
  },

~~ 원하는 곳의 위치를 적으면된다..

 

이번에 프로젝트 환경설정을 담당한 사람이 폴더구조를 개같이 해놔서 쓸데없는 설정들이 막 추가되고 그랬는데..

nuxt.config.js가 있는 폴더 보다 한단계 아래쪽으로 src/componets 이런식으로 구성을 해놓으면  nuxt 기본설정들이

안먹히는 부분들은 따로 다 nuxt.config.js에 설정들을 추가해줘야했다.

 

예를 들면 소스디렉토리를 가르쳐줘야한다던지

srcDir: 'src/',

 

 

프로젝트 환경설정들은 진짜 처음에 딱 한번만 하는거라 매번 할때마다 새롭고 까다로운 것들인데,, 그냥 도구 의존하는것도 좋은것 같다!

왜 cli가 만들어졌는지 이해가된다.