Tailwind CSS 안 먹는 에러 해결 / tailwind css is not woriking / tailwind safeList

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: {
    extend: {
      colors: {
        primary: { ...generateColors('#3C8EEE') },
        warning: { ...generateColors('#F59E0B') },
        danger: { ...generateColors('#EF4444') },
      },
    },
  },
  safelist: [
    {
      pattern: /grid-/,
    },
  ],
  plugins: [],
};

1. 제 경우 grid 가 안 먹어서 safelist 프로퍼티를 사용하여 pattern 에 명시 후 반드시 로드하도록 처리했습니다.

2. tailwind 는 처음 실행되면 모든~ 클래스를 가져와서 읽는데, 단 한 번도 사용되지 않은 클래스도 처리하도록 명시했습니다.

3. 간단한 예시로 캘린더 컴포넌트를 내부가 아닌 외부에서 가져올 경우, 또한 미리 읽어오는 처리 방식이 아닌 사용자가 직접 해당 페이지에 들어갔을 때 외부에서 해당 컴포넌트를 불렀을 경우!

그 컴포넌트가 tailwind방식으로 처리됐을 경우, 저기 캘린더에 사용한 grid 는 현재 프로젝트 기준 단 한 번도 사용하지 않은 클래스여서 다 깨집니다.

 

4. 이렇게 깨지는 것을 방지 하기 위해 미리 talwind.config.js 파일에 safelist 를 설정합니다.