๐Ÿšจ [tailwind] tailwind.config ์ˆ˜์ • ์‹œ ์ฃผ์˜ ์‚ฌํ•ญ

2024๋…„ 09์›” 11์ผ
3๋ถ„

๋ฐœ์ƒํ•œ ๋ฌธ์ œ

tailwind ์„ค์ • ํŒŒ์ผ์—์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์ƒ‰์ƒ์„ ์ง€์ •ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๊ณ ์ž ํ–ˆ๋Š”๋ฐ, ์„ค์ •์„ ๋ณ€๊ฒฝํ•œ ํ›„ ์ž‘์„ฑํ•œ ์ƒ‰์ƒ ์™ธ์— tailwind์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณต๋˜๋Š” ์ƒ‰์ƒ์ด ์ ์šฉ๋˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.

tailwind ์„ค์ • ํŒŒ์ผ

tailwind๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ์ปค์Šคํ…€ํ•  ์ˆ˜ ์žˆ๋Š” ์„ค์ • ํŒŒ์ผ์ด๋‹ค. ๊ณตํ†ต ์ปฌ๋Ÿฌ, ํฐํŠธ, ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ๋“ฑ์„ ์ˆ˜์ •, ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ˆ˜์ • ์‹œ ์ฃผ์˜ ์‚ฌํ•ญ

theme์—์„œ ์ปค์Šคํ…€ ์ƒ‰์ƒ๋งŒ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ theme.colors๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค. ๋‹จ, ์ถ”๊ฐ€ ํ•  ๋•Œ๋Š” ๊ผญ theme.extend ๋‚ด๋ถ€์— ์ •์˜ํ•ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๊ธฐ์กด tailwind ํด๋ž˜์Šค๋ฅผ ๋ฎ์–ด์“ฐ๊ฒŒ ๋œ๋‹ค. ์ฆ‰, ๊ธฐ์กด ์ƒ‰์ƒ์„ ๋ฎ์–ด์“ธ ๊ฒฝ์šฐ theme.colors, ๊ธฐ์กด ์ƒ‰์ƒ์— ์ถ”๊ฐ€ํ•  ๊ฒฝ์šฐ theme.extend.colors์— ์ •์˜ํ•˜๋ฉด ๋œ๋‹ค.

extend๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ

๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด theme.colors ์— ๋ฐ”๋กœ ์ ‘๊ทผํ•˜์—ฌ ์ˆ˜์ •ํ•˜๊ณ  ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ๊ธฐ๋ณธ์ ์œผ๋กœ tailwind์—์„œ ์ œ๊ณต๋˜๋Š” color๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๊ฒŒ ๋œ๋‹ค.

{
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    /** ์ƒ๋žต */
  },
}

extend๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒฝ์šฐ

๋‹ค์Œ ์ฝ”๋“œ๋Š” theme.extend.colors ๋ฅผ ์ˆ˜์ •ํ•œ ๊ฒฝ์šฐ์ด๋‹ค. ์ด๋ ‡๊ฒŒ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ๊ธฐ๋ณธ์ ์œผ๋กœ tailwind์—์„œ ์ œ๊ณต๋˜๋Š” color๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ์ถ”๊ฐ€์ ์œผ๋กœ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ๋œ color๋„ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

theme: {
  extend: {
    colors: {
      brown: {
        50: '#fdf8f6',
        100: '#f2e8e5',
        200: '#eaddd7',
        300: '#e0cec7',
        400: '#d2bab0',
        500: '#bfa094',
        600: '#a18072',
        700: '#977669',
        800: '#846358',
        900: '#43302b',
      },
    }
  },
},

Reference