Skip to content

Tailwind:Colors

Naming your colors

Tailwind는 기본적으로 문자 색상 이름(예: red, green 등)과 숫자 배율(여기서 50은 밝고 900은 어두움)을 사용합니다. 우리는 이것이 대부분의 프로젝트에서 최선의 선택이라고 생각하며 primary 또는 danger와 같은 추상적인 이름을 사용하는 것보다 유지 관리가 더 쉽다는 것을 알게 되었습니다.

즉, Tailwind에서 색상 이름을 원하는 대로 지정할 수 있으며, 예를 들어 여러 테마를 지원해야 하는 프로젝트에서 작업하는 경우 더 추상적인 이름을 사용하는 것이 좋습니다. 

module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

Using CSS variables

If you’d like to define your colors as CSS variables, you’ll need to define those variables as just the color channels if you want them to work with the opacity modifier syntax:

Define your CSS variables as channels with no color space function 

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

@layer base {
  :root {
    --color-primary: 255 115 179;
    --color-secondary: 111 114 185;
    /* ... */
  }
}

WARNING

Don’t include the color space function or opacity modifiers won’t work. like --color-primary: rgb(255 115 179);

Then define your colors in your configuration file, being sure to include the color space you’re using, and the special <alpha-value> placeholder that Tailwind will use to inject the alpha value when using an opacity modifier: 

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // Using modern `rgb`
      primary: 'rgb(var(--color-primary) / <alpha-value>)',
      secondary: 'rgb(var(--color-secondary) / <alpha-value>)',

      // Using modern `hsl`
      primary: 'hsl(var(--color-primary) / <alpha-value>)',
      secondary: 'hsl(var(--color-secondary) / <alpha-value>)',

      // Using legacy `rgba`
      primary: 'rgba(var(--color-primary), <alpha-value>)',
      secondary: 'rgba(var(--color-secondary), <alpha-value>)',
    }
  }
}

When defining your colors this way, make sure that the format of your CSS variables is correct for the color function you are using. You’ll want to use spaces if using the modern space-separated syntax, and commas if using legacy functions like rgba or hsla: 

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

@layer base {
  :root {
    /* For rgb(255 115 179 / <alpha-value>) */
    --color-primary: 255 115 179;

    /* For hsl(198deg 93% 60% / <alpha-value>) */
    --color-primary: 198deg 93% 60%;

    /* For rgba(255, 115, 179, <alpha-value>) */
    --color-primary: 255, 115, 179;
  }
}

See also

Favorite site