tailwind.config.cjs로 컬러테마 지정하기

양성진·2022년 12월 22일
0

CSS

목록 보기
4/4

메인컬러 - primary

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors:{
        "gray-20":"#F8F4EB",
        "gray-50":"#EFE6E6",
        "gray-100":"#DFCCCC",
        "gray-500":"#5E0000",
        "primary-100":"#FFE1E0",
        "primary-300":"#FFA6A3",
        "primary-500":"#FF6B66",
        "secondary-400":"#FFCD58",
        "secondary-500":"#FFC132",

      }
    },
  },
  plugins: [],
}

main은 프라이머리지정을 하고 세컨더리를 정하는 식으로 해주면 좋은거 같다

https://youtu.be/I2NNxr3WPDo

이 동영상에서 알려준 내용인데

css를 작업하면서 이에 대한 내용을 들어보긴 했는데 재대로 알고 만들고 지정해본건 처음인거 같다. 미리 목업을 할때 미리미리 해놓으면 정말 좋을거 같다.

profile
프론트엔드 개발자를 꿈꾸는 돼지

0개의 댓글

관련 채용 정보