Presets - Tailwind CSS

기본적으로 여러분이 tailwind.config.js 파일에 추가한 설정은 기본 설정과 지능적으로 병합됩니다. 여러분의 설정은 오버라이드와 확장 역할을 합니다.

presets 옵션을 사용하면 기본으로 사용할 다른 설정을 지정할 수 있습니다. 이를 통해 여러 프로젝트에서 재사용할 커스텀 설정 세트를 쉽게 패키징할 수 있습니다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  ],
  // ...
}

이 기능은 동일한 브랜드의 여러 Tailwind 프로젝트를 관리하는 팀에게 매우 유용합니다. 색상, 폰트 및 기타 공통 커스텀 설정을 단일 소스로 관리할 수 있습니다.

프리셋 만들기

프리셋은 일반적인 Tailwind 설정 객체와 동일한 형태를 가집니다. tailwind.config.js 파일에 추가하는 설정과 정확히 같은 구조입니다.

my-preset.js

// 예제 프리셋
module.exports = {
  theme: {
    colors: {
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
    },
    extend: {
      flexGrow: {
        2: '2',
        3: '3',
      },
      zIndex: {
        60: '60',
        70: '70',
        80: '80',
        90: '90',
        100: '100',
      },
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

보시다시피, 프리셋은 테마 오버라이드 및 확장, 플러그인 추가, 접두사 설정 등 익숙한 모든 설정 옵션을 포함할 수 있습니다. 자세한 내용은 설정 병합 로직을 참고하세요.

이 프리셋이 ./my-preset.js에 저장되었다고 가정하면, 실제 프로젝트의 tailwind.config.js 파일에서 presets 키 아래에 추가하여 사용할 수 있습니다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // 이 프로젝트에 특화된 커스터마이징은 여기에 추가
  theme: {
    extend: {
      minHeight: {
        48: '12rem',
      }
    }
  },
}

기본적으로 프리셋은 여러분의 설정과 마찬가지로 Tailwind의 기본 설정을 확장합니다. 기본 설정을 완전히 대체하는 프리셋을 만들고 싶다면, 프리셋 자체에 빈 presets 키를 포함시키면 됩니다.

// 예제 프리셋
module.exports = {
  presets: [],
  theme: {
    // ...
  },
  plugins: [
    // ...
  ],
}

자세한 내용은 기본 설정 비활성화를 참고하세요.

병합 로직 심층 분석

프로젝트별 설정(tailwind.config.js 파일에 있는 설정)은 프리셋과 병합될 때 기본 설정과 병합되는 방식과 동일하게 처리됩니다.

tailwind.config.js에서 다음 옵션들은 프리셋에 동일한 옵션이 존재할 경우 단순히 대체됩니다:

content
darkMode
prefix
important
variantOrder
separator
safelist

나머지 옵션들은 각각 해당 옵션에 가장 적합한 방식으로 신중하게 병합됩니다. 이에 대한 자세한 설명은 아래에서 다룹니다.

테마

theme 객체는 얕은 병합(shallow merge) 방식으로 처리됩니다. tailwind.config.js 파일의 최상위 키는 프리셋(preset)에 있는 동일한 최상위 키를 대체합니다. 단, extend 키는 예외적으로 모든 설정에서 수집되며, 나머지 테마 설정 위에 적용됩니다.

theme 옵션이 어떻게 동작하는지 더 자세히 알아보려면 테마 설정 문서를 참고하세요.

프리셋

presets 배열은 설정(configuration) 간에 병합됩니다. 이를 통해 프리셋이 자신만의 프리셋을 포함할 수 있고, 그 프리셋도 다시 자신만의 프리셋을 포함할 수 있습니다.

플러그인

plugins 배열은 설정(configuration) 간에 병합됩니다. 이를 통해 프리셋이 플러그인을 등록할 수 있으면서도 프로젝트 수준에서 추가 플러그인을 등록할 수 있습니다.

이는 프리셋에 의해 추가된 플러그인을 비활성화할 수 없다는 것을 의미합니다. 만약 프리셋에 있는 플러그인을 비활성화하고 싶다면, 해당 플러그인을 프리셋에서 제거하고 프로젝트별로 포함시키는 것이 좋습니다. 또는 프리셋을 두 개로 분리하는 방법도 고려해 볼 수 있습니다.

코어 플러그인

corePlugins 옵션은 객체로 설정하거나 배열로 설정하는지에 따라 다르게 동작합니다.

corePlugins를 객체로 설정하면, 설정 간에 병합됩니다.

my-preset.js

module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js'),
  ],
  // 이 설정은 병합됩니다
  corePlugins: {
    cursor: false
  }
}

corePlugins를 배열로 설정하면, 설정된 프리셋에서 제공하는 corePlugins 설정을 모두 대체합니다.

my-preset.js

module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // 이 설정은 프리셋의 설정을 대체합니다
  corePlugins: ['float', 'padding', 'margin']
}

여러 프리셋 확장하기

presets 옵션은 배열 형태로, 여러 프리셋을 받을 수 있습니다. 이 기능은 재사용 가능한 커스텀 설정을 독립적으로 가져올 수 있는 조각으로 나누고 싶을 때 유용합니다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-colors'),
    require('@acmecorp/tailwind-fonts'),
    require('@acmecorp/tailwind-spacing'),
  ]
}

여러 프리셋을 추가할 때 주의할 점은, 프리셋 간에 설정이 겹치는 경우, 자신의 커스텀 설정이 프리셋과 충돌할 때와 같은 방식으로 해결되며, 마지막에 정의된 설정이 우선 적용된다는 것입니다.

예를 들어, 두 설정 모두 커스텀 색상 팔레트를 제공하고 있고 (extend를 사용하지 않는 경우), configuration-b의 색상 팔레트가 사용됩니다:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
  ]
}

기본 설정 비활성화

기본 설정을 완전히 비활성화하고 아무런 기본 설정 없이 시작하려면 presets를 빈 배열로 설정합니다:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [],
  // ...
}

이렇게 하면 Tailwind의 모든 기본 설정이 비활성화되므로 색상, 글꼴 패밀리, 글꼴 크기, 간격 값 등이 전혀 생성되지 않습니다.

또한, 프리셋 내에서 이 작업을 수행할 수도 있습니다. 이 경우 프리셋이 Tailwind의 기본 설정을 확장하지 않고 자체적으로 완전한 디자인 시스템을 제공하도록 할 수 있습니다:

my-preset.js

module.exports = {
  presets: [],
  // ...
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // ...
}

On this page