Tailwind CSS home page
  1. Customization
  2. Theme Configuration

tailwind.config.js 파일의 theme 섹션은 프로젝트의 색상 팔레트, 글꼴 크기, 폰트, 브레이크포인트, 테두리 반경 값 등을 정의하는 곳입니다.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Tailwind는 시작하기에 충분한 기본 테마를 제공하지만, 이를 변경하거나 확장하는 것을 두려워하지 마세요. 여러분의 디자인 목표에 맞게 필요한 만큼 커스터마이징하는 것을 권장합니다.

테마 구조

theme 객체는 screens, colors, spacing 키를 포함하며, 각각의 커스터마이징 가능한 코어 플러그인에 대한 키도 가지고 있습니다.

전체 테마 옵션 목록은 테마 설정 참조 또는 기본 테마를 확인하세요.

Screens

screens 키를 사용하면 프로젝트의 반응형 브레이크포인트를 커스터마이징할 수 있습니다.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

더 자세한 내용은 브레이크포인트 커스터마이징 문서를 참고하세요.

Colors

colors 키를 사용하면 프로젝트의 전역 색상 팔레트를 커스텀할 수 있습니다.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

기본적으로 이 색상들은 backgroundColor, borderColor, textColor 등 모든 색상 관련 코어 플러그인에 상속됩니다.

더 자세한 내용은 색상 커스터마이징 문서를 참고하세요.

간격 설정

spacing 키를 사용하면 프로젝트의 전역 간격 및 크기 스케일을 커스터마이징할 수 있습니다.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
      11: '2.75rem',
      12: '3rem',
      14: '3.5rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      28: '7rem',
      32: '8rem',
      36: '9rem',
      40: '10rem',
      44: '11rem',
      48: '12rem',
      52: '13rem',
      56: '14rem',
      60: '15rem',
      64: '16rem',
      72: '18rem',
      80: '20rem',
      96: '24rem',
    },
  }
}

기본적으로 이 값들은 padding, margin, width, height, maxHeight, flex-basis, gap, inset, space, translate, scrollMargin, scrollPadding, textIndent와 같은 코어 플러그인에 상속됩니다.

더 자세한 내용은 간격 커스터마이징 문서를 참고하세요.

코어 플러그인

theme 섹션의 나머지 부분은 각각의 코어 플러그인에 대해 어떤 값들이 사용 가능한지 설정하는 데 사용됩니다.

예를 들어, borderRadius 키를 사용하면 어떤 border-radius 유틸리티가 생성될지 커스터마이징할 수 있습니다:

module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '.125rem',
      DEFAULT: '.25rem',
      'lg': '.5rem',
      'full': '9999px',
    },
  }
}

여기서 키는 생성될 클래스의 접미사를 결정하고, 값은 실제 CSS 선언의 값을 결정합니다.

위의 borderRadius 설정 예제는 다음과 같은 CSS 클래스를 생성합니다:

.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }

DEFAULT 키를 사용하면 접미사 없이 rounded 클래스가 생성됩니다. 이는 Tailwind에서 흔히 사용되는 관례이며, 모든 코어 플러그인에서 지원됩니다.

특정 코어 플러그인을 커스터마이징하는 방법에 대해 더 알아보려면 해당 플러그인의 문서를 참고하세요.

사용 가능한 모든 theme 속성과 기본값에 대한 전체 참조는 기본 theme 설정을 확인하세요.

기본 테마 커스터마이징

여러분의 프로젝트는 기본적으로 기본 테마 설정의 값을 자동으로 상속받습니다. 기본 테마를 커스터마이징하고 싶다면, 목표에 따라 몇 가지 다른 방법을 선택할 수 있습니다.

기본 테마 확장하기

기본 테마 옵션의 값을 유지하면서 새로운 값을 추가하고 싶다면, 설정 파일에서 theme.extend 키 아래에 확장 내용을 추가하세요. 이 키 아래의 값은 기존 theme 값과 병합되며, 새로운 클래스로 자동으로 사용할 수 있게 됩니다.

예를 들어, 여기서는 fontFamily 속성을 확장하여 요소에 사용되는 폰트를 변경할 수 있는 font-display 클래스를 추가합니다:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif', // 새로운 `font-display` 클래스 추가
      }
    }
  }
}

이를 테마에 추가한 후에는 다른 폰트 패밀리 유틸리티처럼 사용할 수 있습니다:

<h1 class="font-display">
  이 텍스트는 Oswald 폰트를 사용합니다.
</h1>

일부 경우, 속성은 변형(variants)에 매핑되어 유틸리티 앞에 배치하여 조건부로 스타일을 적용할 수 있습니다. 예를 들어, 기존의 반응형 화면 크기와 동일하게 작동하는 3xl 화면 크기를 추가하려면 screens 키 아래에 속성을 추가하세요:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px', // 새로운 `3xl:` 화면 변형 추가
      }
    }
  }
}

이 추가로, sm, md, lg 등과 같은 기존의 반응형 변형과 함께 새로운 3xl 화면 크기가 사용 가능해집니다. 이 새로운 변형을 유틸리티 클래스 앞에 배치하여 사용할 수 있습니다:

<blockquote class="text-base md:text-md 3xl:text-lg">
  인터넷에 접속해야 해, 모든 일이 늦어지고 있어!
</blockquote>

기본 테마 재정의하기

기본 테마의 옵션을 재정의하려면 tailwind.config.js 파일의 theme 섹션 아래에 직접 재정의 내용을 추가하면 됩니다.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // 기본 `opacity` 값을 모두 대체
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

이렇게 하면 해당 키에 대한 Tailwind의 기본 설정이 완전히 대체됩니다. 위 예제에서는 기본 opacity 유틸리티가 생성되지 않습니다.

제공하지 않은 키는 기본 테마에서 상속되므로, 위 예제에서는 색상, 간격, 테두리 반경, 배경 위치 등에 대한 기본 테마 설정이 유지됩니다.

물론, 동일한 설정 파일에서 기본 테마의 일부를 재정의하고 다른 부분을 확장할 수도 있습니다.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    },
    extend: {
      screens: {
        '3xl': '1600px',
      }
    }
  }
}

다른 값 참조하기

테마에서 다른 값을 참조해야 한다면, 정적 값 대신 클로저를 제공할 수 있습니다. 이 클로저는 theme() 함수를 포함하는 객체를 받습니다. 이 함수를 사용하면 점 표기법을 통해 테마의 다른 값을 조회할 수 있습니다.

예를 들어, background-size 유틸리티를 생성할 때 theme('spacing')을 참조하여 간격 스케일의 모든 값을 사용할 수 있습니다. 이는 backgroundSize 설정에서 다음과 같이 구현할 수 있습니다:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      // ...
    },
    backgroundSize: ({ theme }) => ({
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
      ...theme('spacing')
    })
  }
}

theme() 함수는 완전히 병합된 테마 객체에서 찾고자 하는 값을 찾으려고 시도합니다. 따라서 여러분이 커스텀한 값뿐만 아니라 기본 테마 값도 참조할 수 있습니다. 또한 이 함수는 재귀적으로 동작하므로, 체인의 끝에 정적 값이 있다면 원하는 값을 해결할 수 있습니다.

단, 이와 같은 클로저는 각 섹션 내부의 키가 아닌 최상위 테마 키에서만 사용할 수 있습니다.

개별 값에는 함수를 사용할 수 없습니다

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fill: {
      gray: ({ theme }) => theme('colors.gray')
    }
  }
}

최상위 테마 키에는 함수를 사용하세요

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fill: ({ theme }) => ({
      gray: theme('colors.gray')
    })
  }
}

기본 테마 참조하기

기본 테마의 값을 참조해야 할 경우, tailwindcss/defaultTheme에서 가져올 수 있습니다.

이 기능이 유용한 경우 중 하나는 Tailwind의 기본 글꼴 스택에 새로운 글꼴을 추가하고 싶을 때입니다:

tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

특정 코어 플러그인 전체 비활성화하기

특정 코어 플러그인에 대해 클래스를 생성하지 않으려면, theme 설정에서 해당 키에 빈 객체를 제공하는 것보다 corePlugins 설정에서 해당 플러그인을 false로 설정하는 것이 더 좋습니다.

테마 설정에 빈 객체를 할당하지 마세요

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {},
  }
}

코어 플러그인 설정에서 플러그인을 비활성화하세요

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    opacity: false,
  }
}

최종 결과는 동일하지만, 많은 코어 플러그인은 설정을 노출하지 않기 때문에 corePlugins를 통해서만 비활성화할 수 있습니다. 따라서 일관성을 유지하는 것이 더 좋습니다.

설정 참조

screens, colors, spacing을 제외한 theme 객체의 모든 키는 Tailwind의 코어 플러그인 중 하나에 매핑됩니다. 많은 플러그인이 정적 값 집합만 허용하는 CSS 속성(예: float)을 담당하기 때문에, 모든 플러그인이 theme 객체에 해당 키를 가지고 있지는 않다는 점을 유의하세요.

이 모든 키는 기본 테마 확장을 활성화하기 위해 theme.extend 키 아래에서도 사용할 수 있습니다.

KeyDescription
accentColorValues for the accent-color property
animationValues for the animation property
ariaValues for the aria property
aspectRatioValues for the aspect-ratio property
backdropBlurValues for the backdropBlur plugin
backdropBrightnessValues for the backdropBrightness plugin
backdropContrastValues for the backdropContrast plugin
backdropGrayscaleValues for the backdropGrayscale plugin
backdropHueRotateValues for the backdropHueRotate plugin
backdropInvertValues for the backdropInvert plugin
backdropOpacityValues for the backdropOpacity plugin
backdropSaturateValues for the backdropSaturate plugin
backdropSepiaValues for the backdropSepia plugin
backgroundColorValues for the background-color property
backgroundImageValues for the background-image property
backgroundOpacityValues for the background-opacity property
backgroundPositionValues for the background-position property
backgroundSizeValues for the background-size property
blurValues for the blur plugin
borderColorValues for the border-color property
borderOpacityValues for the borderOpacity plugin
borderRadiusValues for the border-radius property
borderSpacingValues for the border-spacing property
borderWidthValues for the borderWidth plugin
boxShadowValues for the box-shadow property
boxShadowColorValues for the boxShadowColor plugin
brightnessValues for the brightness plugin
caretColorValues for the caret-color property
colorsYour project's color palette
columnsValues for the columns property
containerConfiguration for the container plugin
contentValues for the content property
contrastValues for the contrast plugin
cursorValues for the cursor property
divideColorValues for the divideColor plugin
divideOpacityValues for the divideOpacity plugin
divideWidthValues for the divideWidth plugin
dropShadowValues for the dropShadow plugin
fillValues for the fill plugin
flexValues for the flex property
flexBasisValues for the flex-basis property
flexGrowValues for the flex-grow property
flexShrinkValues for the flex-shrink property
fontFamilyValues for the font-family property
fontSizeValues for the font-size property
fontWeightValues for the font-weight property
gapValues for the gap property
gradientColorStopsValues for the gradientColorStops plugin
gradientColorStopPositionsValues for the gradient-color-stop-positions property
grayscaleValues for the grayscale plugin
gridAutoColumnsValues for the grid-auto-columns property
gridAutoRowsValues for the grid-auto-rows property
gridColumnValues for the grid-column property
gridColumnEndValues for the grid-column-end property
gridColumnStartValues for the grid-column-start property
gridRowValues for the grid-row property
gridRowEndValues for the grid-row-end property
gridRowStartValues for the grid-row-start property
gridTemplateColumnsValues for the grid-template-columns property
gridTemplateRowsValues for the grid-template-rows property
heightValues for the height property
hueRotateValues for the hueRotate plugin
insetValues for the top, right, bottom, and left properties
invertValues for the invert plugin
keyframesKeyframe values used in the animation plugin
letterSpacingValues for the letter-spacing property
lineHeightValues for the line-height property
listStyleTypeValues for the list-style-type property
listStyleImageValues for the list-style-image property
marginValues for the margin property
lineClampValues for the line-clamp property
maxHeightValues for the max-height property
maxWidthValues for the max-width property
minHeightValues for the min-height property
minWidthValues for the min-width property
objectPositionValues for the object-position property
opacityValues for the opacity property
orderValues for the order property
outlineColorValues for the outline-color property
outlineOffsetValues for the outline-offset property
outlineWidthValues for the outline-width property
paddingValues for the padding property
placeholderColorValues for the placeholderColor plugin
placeholderOpacityValues for the placeholderOpacity plugin
ringColorValues for the ringColor plugin
ringOffsetColorValues for the ringOffsetColor plugin
ringOffsetWidthValues for the ringOffsetWidth plugin
ringOpacityValues for the ringOpacity plugin
ringWidthValues for the ringWidth plugin
rotateValues for the rotate plugin
saturateValues for the saturate plugin
scaleValues for the scale plugin
screensYour project's responsive breakpoints
scrollMarginValues for the scroll-margin property
scrollPaddingValues for the scroll-padding property
sepiaValues for the sepia plugin
skewValues for the skew plugin
spaceValues for the space plugin
spacingYour project's spacing scale
strokeValues for the stroke property
strokeWidthValues for the stroke-width property
supportsValues for the supports property
dataValues for the data property
textColorValues for the color property
textDecorationColorValues for the text-decoration-color property
textDecorationThicknessValues for the text-decoration-thickness property
textIndentValues for the text-indent property
textOpacityValues for the textOpacity plugin
textUnderlineOffsetValues for the text-underline-offset property
transformOriginValues for the transform-origin property
transitionDelayValues for the transition-delay property
transitionDurationValues for the transition-duration property
transitionPropertyValues for the transition-property property
transitionTimingFunctionValues for the transition-timing-function property
translateValues for the translate plugin
sizeValues for the size property
widthValues for the width property
willChangeValues for the will-change property
zIndexValues for the z-index property