tailwindcss purge option 이슈

warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

tailwindcss가 3.0으로 오면서 purge옵션이 content로 옮겨갔기 때문에 뜨는 경고.

 

---

 

기존 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'Helvetica', 'sans-serif'],
      },
      colors: {
        base: '#1e1e2d',
      },
    },
  },
  plugins: [],
};

 

 

 

 

수정 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'Helvetica', 'sans-serif'],
      },
      colors: {
        base: '#1e1e2d',
      },
    },
  },
  plugins: [],
};

 

 

 

 

빌드 시에 모든 tailwindcss 클래스들을 포함하는 것이 아니라 해당 경로에서 쓰이는 클래스들만 포함하는 최적화 옵션이다.