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

YANG쓰·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개의 댓글