[트러블슈팅] tailwindcss 리터럴 적용 안되는 문제

jee-woo·2023년 4월 17일
0

Trouble Shooting

목록 보기
2/3

tailwind.config.js에 safelist 추가

리터럴로 적용할 className을 tailwind.config.js의 safelist 배열에 추가해서 해결했다.

/** @type {import('tailwindcss').Config} */
export const content = ["./src/**/*.{html,js,jsx,ts,tsx}"];
export const theme = {
  screens: {
    sm: "660px",
    md: "860px",
    lg: "1140px",
    xl: "1260px",
    "2xl": "1460px",
  },
  extend: {
    colors: {
      "cm-100": "#F7FBFC",
      "cm-200": "#D6E6F2",
      "cm-300": "#B9D7EA",
      "cm-400": "#769FCD",
    },
  },
};
export const safelist = ["z-[1]", "z-[2]", "z-[3]", "z-[4]", "z-[5]"];
export const plugins = [];

https://velog.io/@arthur/Tailwind-CSS-%EC%97%90%EC%84%9C-%EB%8F%99%EC%A0%81%EC%9C%BC%EB%A1%9C-%ED%81%B4%EB%9E%98%EC%8A%A4-%ED%95%A0%EB%8B%B9%ED%95%98%EA%B8%B0

profile
FE Developer

0개의 댓글