[ Nuxt, Tailwind ] custom color 적용

primary로 정의하고 싶어

 

 tailwind.config.mjs 파일에 추가할 컬러를 작성해줬다. 

export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#EFF7FF",
		  ...
        },
      },
    },
  },
};

 

분명 공식 문서에서는 tailwind config 파일에 이렇게 정의하면 된다고 했는데,…

 

뭐에오...?

 

 

export default {
  theme: {
    extend: {
      colors: {
        myColor: {
          50: "#EFF7FF",
          ...
        },
      },
    },
  },
};

뭐 이런 식으로 색상 명을 바꿔주면 적용이 된다.

즉, primary 이름을 사용하는 데 뭔가 문제가 있다는 것 같다.

 

그래도 primary라는 이름으로 해당 색상을 사용하고 싶다면!!!!

--p-primary 를 정의하는 방법도 있지 않을까

 

 

🔽

네, 준비해드렸습니다.

 

 

main.css

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

@layer base {
  :root {
    --p-primary-50: #eff7ff;
	...
  }
}

 

tailwind.config.mjs

import primeuiPlugin from "tailwindcss-primeui";

export default {
  // ...
  theme: {
    extend: {
      colors: {
        primary: "var(--p-primary)",
      },
    },
  },
};

 

nuxt.config.ts

export default defineNuxtConfig({
	// ...
  css: ["~/assets/css/main.css"],
});

• 꼭 css 파일도 config에 등록해주기