Tailwind CSS Customization

Configuration

https://tailwindcss.com/docs/configuration

Tailwind 설치를 구성하고 사용자 지정하는 방법에 대한 안내서입니다.
Tailwind는 맞춤형 사용자 인터페이스를 구축하기 위한 프레임워크이기 때문에 처음부터 사용자 지정을 염두에 두고 설계되었다.
기본적으로 Tailwind는 프로젝트의 루트에서 사용자 지정을 정의할 수 있는 선택적 `tailwind.config.js` 파일을 찾습니다.

/* tailwind.config.js */
module.exports = {
  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',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

구성 파일의 모든 섹션은 선택 사항이므로 변경할 항목만 지정하면 됩니다. 누락된 섹션은 Tailwind의 기본 구성으로 되돌아갑니다.

구성 파일 생성

https://tailwindcss.com/docs/configuration#creating-your-configuration-file

`tailwindcss` npm 패키지를 설치할 때 포함된 Tailwind CLI 유틸리티를 사용하여 프로젝트에 대한 Tailwind 구성 파일을 생성합니다.

npx tailwindcss init

그러면 프로젝트의 루트에 최소 `tailwind.config.js` 파일이 생성됩니다.

/* tailwind.config.js */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

다른 파일 이름 사용

https://tailwindcss.com/docs/configuration#using-a-different-file-name

`tailwind.config.js` 이외의 이름을 사용하려면 명령줄에서 인수로 전달합니다.

npx tailwindcss init tailwindcss-config.js

사용자 지정 파일 이름을 사용할 때 Tailwind CLI 도구로 CSS를 컴파일할 때 명령줄 인수로 지정해야 합니다.

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

Tailwind를 PostCSS 플러그인으로 사용하는 경우 PostCSS 구성에서 사용자 지정 구성 경로를 지정해야 합니다.

/* postcss.config.js */
module.exports = {
  plugins: {
    tailwindcss: {
      config: './tailwindcss-config.js'
    },
  },
}

PostCSS 구성 파일 생성

https://tailwindcss.com/docs/configuration#generating-a-post-css-configuration-file

`tailwind.config.js` 파일과 함께 기본 `postcss.config.js` 파일도 생성하려면 `-p` 플래그를 사용하십시오.

npx tailwindcss init -p

이렇게 하면 프로젝트에 다음과 같은 `postcss.config.js` 파일이 생성됩니다.

/* postcss.config.js */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

전체 기본 구성 스캐폴딩

https://tailwindcss.com/docs/configuration#scaffolding-the-entire-default-configuration

대부분의 사용자는 구성 파일을 가능한 최소로 유지하고 사용자 정의할 항목만 지정하는 것이 좋습니다.

Tailwind의 기본 구성이 모두 포함된 전체 구성 파일을 비계화하려면 `--full` 옵션을 사용하십시오.

npx tailwindcss init --full

Tailwind가 내부적으로 사용하는 기본 구성 파일과 일치하는 파일을 얻을 수 있습니다.

Configuration Options

Content

https://tailwindcss.com/docs/configuration#content

`content` 섹션은 Tailwind 클래스 이름을 포함하는 모든 HTML 템플릿, JS 구성 요소 및 기타 파일의 경로를 구성하는 곳입니다.

/* tailwind.config.js */
module.exports = {
  content: [
    './pages/**/*.{html, js}',
    './components/**/*.{html, js}',
  ],
  // ...
}

컨텐츠 소스 구성에 대한 자세한 내용은 Content Configuration 설명서를 참조하십시오.

Theme

https://tailwindcss.com/docs/configuration#theme

`theme` 섹션은 사이트의 시각적 디자인과 관련된 색상표, 글꼴, 유형 척도, 테두리 크기, 중단점을 정의하는 섹션입니다.

/* tailwind.config.js */
module.exports = {
  // ...
  theme: {
    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: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

기본 테마와 기본 테마를 사용자 지정하는 방법에 대한 자세한 내용은 theme configuration guide를 참조하십시오.

Plugins

https://tailwindcss.com/docs/configuration#plugins

`plugins` 섹션에서는 추가 유틸리티, 구성 요소, 기본 스타일 또는 사용자 지정 변형 생성에 사용할 수 있는 플러그인을 Tailwind에 등록할 수 있습니다.

/* tailwind.config.js */
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}

plugin authoring guide에서 직접 플러그인을 작성하는 방법에 대해 자세히 알아보십시오.

Presets

https://tailwindcss.com/docs/configuration#presets

`presets` 섹션에서는 Tailwind의 기본 구성을 사용하는 대신 사용자 지정 기본 구성을 지정할 수 있습니다.

/* tailwind.config.js */
module.exports = {
  // ...
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],

  // Project-specific customizations
  theme: {
    //...
  },
}

presets documentation에서 사전 설정에 대해 자세히 알아보십시오.

Prefix

https://tailwindcss.com/docs/configuration#prefix

`prefix` 옵션을 사용하면 Tailwind에서 생성된 모든 유틸리티 클래스에 사용자 지정 접두사를 추가할 수 있습니다.

이것은 이름 지정 충돌이 있을 수 있는 기존 CSS 위에 Tailwind를 계층화할 때 정말 유용할 수 있다.

예를 들어 `prefix` 옵션을 다음과 같이 설정하여 `tw-` 접두사를 추가할 수 있습니다.

/* tailwind.config.js */
module.exports = {
  prefix: 'tw-',
}

이제 모든 클래스가 구성된 접두사를 사용하여 생성됩니다.

.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */

이 접두사는 변형 수정자 뒤에 추가된다는 것을 이해하는 것이 중요합니다. 즉, `sm:` 또는 `hover:`와 같은 반응형 또는 상태 한정자가 있는 클래스는 여전히 먼저 반응형 또는 상태 한정자를 가지며, 사용자 지정 접두사는 콜론 뒤에 표시됩니다.

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

음수 값에 대한 대시 한정자는 접두사 앞에 추가해야 하므로 `tw-`를 접두사로 구성한 경우 `-mt-8`이 `-tw-mt-8`이 됩니다.

<div class="-tw-mt-8">
  <!-- -->
</div>

접두사는 Tailwind에 의해 생성된 클래스에만 추가되며, 사용자 지정 클래스에 접두사가 추가되지 않습니다.

즉, 다음과 같이 사용자 지정 유틸리티를 추가할 수 있습니다.

@layer utilities {
  .bg-brand-gradient { /* ... */ }
}

…생성된 변형에는 구성된 접두사가 없습니다.

.bg-brand-gradient { /* ... */ }
.hover\:bg-brand-gradient:hover { /* ... */ }

사용자 고유의 유틸리티도 접두사를 붙이려면 클래스 정의에 접두사를 추가하십시오.

@layer utilities {
  .tw-bg-brand-gradient { /* ... */ }
}

Important

https://tailwindcss.com/docs/configuration#important

`important` 옵션을 사용하면 Tailwind의 유틸리티에 `!important`를 표시할지 여부를 제어할 수 있습니다. 이것은 특수성이 높은 기존 CSS와 Tailwind를 사용할 때 매우 유용할 수 있다.

유틸리티를 `!important`로 생성하려면 구성 옵션의 `important`한 키를 `true`로 설정하십시오.

/* tailwind.config.js */
module.exports = {
  important: true,
}

이제 Tailwind의 모든 유틸리티 클래스가 `!important`로 생성됩니다.

.leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
/* etc. */

이 옵션을 활성화하면 사용자 지정 유틸리티가 `!important`로 자동으로 표시되지 않습니다.

자체 유틸리티를 `!important`로 만들려면 각 선언의 끝에 `!important`를 직접 추가하십시오.

@layer utilities {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd) !important;
  }
}

Selector strategy

https://tailwindcss.com/docs/configuration#selector-strategy

`important`를 `true`로 설정하면 요소에 인라인 스타일을 추가하는 타사 JS 라이브러리를 통합할 때 몇 가지 문제가 발생할 수 있습니다. 이러한 경우 Tailwind의 `!important` 유틸리티가 인라인 스타일을 무너뜨려 의도된 설계를 손상시킬 수 있습니다.

이 문제를 해결하려면 `important`를 대신 `#app`과 같은 ID 선택기로 설정할 수 있습니다.

/* tailwind.config.js */
module.exports = {
  // ...
  important: '#app',
}

이 구성은 주어진 선택기로 모든 유틸리티를 접두사로 붙이므로 실제로 `!important`로 만들지 않고도 유틸리티의 특수성을 효과적으로 높일 수 있습니다.

`important` 선택기를 지정한 후에는 사이트의 루트 요소가 해당 선택기와 일치하는지 확인해야 합니다. 위의 예를 사용하여 스타일이 제대로 작동하려면 루트 요소의 `id` 속성을 `app`으로 설정해야 합니다.

구성이 모두 설정되고 루트 요소가 Tailwind 구성의 셀렉터와 일치하면 Tailwind의 모든 유틸리티는 인라인 스타일을 방해하지 않고 프로젝트에 사용되는 다른 클래스를 물리칠 수 있을 만큼 높은 특수성을 갖게 됩니다.

<html>
<!-- ... -->
<style>
  .high-specificity .nested .selector {
    color: blue;
  }
</style>
<body id="app">
  <div class="high-specificity">
    <div class="nested">
      <!-- Will be red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Will be #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>

선택기 전략을 사용할 때 루트 선택기를 포함하는 템플릿 파일이 content configuration에 포함되어 있는지 확인하십시오. 그렇지 않으면 생산을 위해 빌드할 때 모든 CSS가 제거됩니다.

Important modifier

https://tailwindcss.com/docs/configuration#important-modifier

또는 시작 부분에 `!` 문자를 추가하여 유틸리티를 important할 수 있습니다.

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>

`!`는 항상 유틸리티 이름 앞, 변형 뒤에 붙지만 접두사 앞에 붙습니다.

<div class="sm:hover:!tw-font-bold">

이 기능은 제어하지 않는 일부 스타일과 전쟁 중이므로 특수성을 높여야 하는 드문 상황에서 유용할 수 있습니다.

Separator

https://tailwindcss.com/docs/configuration#separator

`separator` 옵션을 사용하면 유틸리티 이름(`text-center`, `items-end` 등)에서 한정자(screen sizes, `hover`, `focus` 등)를 구분하는 데 사용할 문자를 사용자 정의할 수 있습니다.

기본적으로 콜론(`:`)을 사용하지만 클래스 이름에 특수 문자를 지원하지 않는 Pug와 같은 템플릿 언어를 사용하는 경우 이 값을 변경하는 것이 유용할 수 있습니다.

/* tailwind.config.js */
module.exports = {
  separator: '_',
}

Core Plugins

https://tailwindcss.com/docs/configuration#core-plugins

`corePlugins` 섹션을 사용하면 프로젝트에 Tailwind가 기본적으로 생성하는 클래스를 완전히 비활성화할 수 있습니다.

특정 코어 플러그인을 사용하지 않도록 설정하려면 해당 플러그인을 `false`로 설정하는 `corePlugins` 개체를 제공합니다.

/* tailwind.config.js */
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

사용하도록 설정해야 하는 코어 플러그인의 목록을 보호하려면 사용할 코어 플러그인의 목록이 포함된 배열을 제공하십시오.

/* tailwind.config.js */
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}

Tailwind의 핵심 플러그인을 모두 사용하지 않도록 설정하고 Tailwind를 사용자 지정 플러그인을 처리하는 도구로 사용하려면 빈 배열을 입력하십시오.

/* tailwind.config.js */
module.exports = {
  corePlugins: []
}

다음은 참조할 수 있는 모든 핵심 플러그인 목록입니다.

Core Plugin	Description
`accentColor`	The `accent-color` utilities like `accent-green-700`
`accessibility`	The `sr-only` and `not-sr-only` utilities
`alignContent`	The `align-content` utilities like `content-end`
`alignItems`	The `align-items` utilities like `items-center`
`alignSelf`	The `align-self` utilities like `self-end`
`animation`	The `animation` utilities like `animate-ping`
`appearance`	The `appearance` utilities like `appearance-none`
`aspectRatio`	The `aspect-ratio` utilities like `aspect-square`
`backdropBlur`	The `backdrop-blur` utilities like `backdrop-blur-md`
`backdropBrightness`	The `backdrop-brightness` utilities like `backdrop-brightness-100`
`backdropContrast`	The `backdrop-contrast` utilities like `backdrop-contrast-100`
`backdropFilter`	The `backdrop-filter` utilities like `backdrop-filter`
`backdropGrayscale`	The `backdrop-grayscale` utilities like `backdrop-grayscale-0`
`backdropHueRotate`	The `backdrop-hue-rotate` utilities like `backdrop-hue-rotate-30`
`backdropInvert`	The `backdrop-invert` utilities like `backdrop-invert-0`
`backdropOpacity`	The `backdrop-opacity` utilities like `backdrop-opacity-50`
`backdropSaturate`	The `backdrop-saturate` utilities like `backdrop-saturate-100`
`backdropSepia`	The `backdrop-sepia` utilities like `backdrop-sepia-0`
`backgroundAttachment`	The `background-attachment` utilities like `bg-local`
`backgroundBlendMode`	The `background-blend-mode` utilities like `bg-blend-color-burn`
`backgroundClip`	The `background-clip` utilities like `bg-clip-padding`
`backgroundColor`	The `background-color` utilities like `bg-green-700`
`backgroundImage`	The `background-image` utilities like `bg-gradient-to-br`
`backgroundOpacity`	The `background-color` opacity utilities like `bg-opacity-25`
`backgroundOrigin`	The `background-origin` utilities like `bg-origin-padding`
`backgroundPosition`	The `background-position` utilities like `bg-left-top`
`backgroundRepeat`	The `background-repeat` utilities like `bg-repeat-x`
`backgroundSize`	The `background-size` utilities like `bg-cover`
`blur`	The `blur` utilities like `blur-md`
`borderCollapse`	The `border-collapse` utilities like `border-collapse`
`borderColor`	The `border-color` utilities like `border-t-green-700`
`borderOpacity`	The `border-color` opacity utilities like `border-opacity-25`
`borderRadius`	The `border-radius` utilities like `rounded-l-lg`
`borderStyle`	The `border-style` utilities like `border-dotted`
`borderWidth`	The `border-width` utilities like `border-t-4`
`boxDecorationBreak`	The `box-decoration-break` utilities like `decoration-clone`
`boxShadow`	The `box-shadow` utilities like `shadow-lg`
`boxShadowColor`	The `box-shadow-color` utilities like `shadow-green-700`
`boxSizing`	The `box-sizing` utilities like `box-border`
`breakAfter`	The `break-after` utilities like `break-after-avoid-page`
`breakBefore`	The `break-before` utilities like `break-before-avoid-page`
`breakInside`	The `break-inside` utilities like `break-inside-avoid`
`brightness`	The `brightness` utilities like `brightness-100`
`caretColor`	The `caret-color` utilities like `caret-green-700`
`clear`	The `clear` utilities like `clear-right`
`columns`	The `columns` utilities like `columns-auto`
`container`	The `container` component
`content`	The `content` utilities like `content-none`
`contrast`	The `contrast` utilities like `contrast-100`
`cursor`	The `cursor` utilities like `cursor-grab`
`display`	The `display` utilities like `table-column-group`
`divideColor`	The between elements `border-color` utilities like `divide-slate-500`
`divideOpacity`	The `divide-opacity` utilities like `divide-opacity-50`
`divideStyle`	The `divide-style` utilities like `divide-dotted`
`divideWidth`	The between elements `border-width` utilities like `divide-x-2`
`dropShadow`	The `drop-shadow` utilities like `drop-shadow-lg`
`fill`	The `fill` utilities like `fill-green-700`
`filter`	The `filter` utilities like `filter`
`flex`	The `flex` utilities like `flex-auto`
`flexBasis`	The `flex-basis` utilities like `basis-px`
`flexDirection`	The `flex-direction` utilities like `flex-row-reverse`
`flexGrow`	The `flex-grow` utilities like `flex-grow`
`flexShrink`	The `flex-shrink` utilities like `flex-shrink`
`flexWrap`	The `flex-wrap` utilities like `flex-wrap-reverse`
`float`	The `float` utilities like `float-left`
`fontFamily`	The `font-family` utilities like `font-serif`
`fontSize`	The `font-size` utilities like `text-3xl`
`fontSmoothing`	The `font-smoothing` utilities like `antialiased`
`fontStyle`	The `font-style` utilities like `italic`
`fontVariantNumeric`	The `font-variant-numeric` utilities like `oldstyle-nums`
`fontWeight`	The `font-weight` utilities like `font-medium`
`gap`	The `gap` utilities like `gap-x-28`
`gradientColorStops`	The `gradient-color-stops` utilities like `via-green-700`
`grayscale`	The `grayscale` utilities like `grayscale-0`
`gridAutoColumns`	The `grid-auto-columns` utilities like `auto-cols-min`
`gridAutoFlow`	The `grid-auto-flow` utilities like `grid-flow-col`
`gridAutoRows`	The `grid-auto-rows` utilities like `auto-rows-min`
`gridColumn`	The `grid-column` utilities like `col-span-6`
`gridColumnEnd`	The `grid-column-end` utilities like `col-end-7`
`gridColumnStart`	The `grid-column-start` utilities like `col-start-7`
`gridRow`	The `grid-row` utilities like `row-span-3`
`gridRowEnd`	The `grid-row-end` utilities like `row-end-4`
`gridRowStart`	The `grid-row-start` utilities like `row-start-4`
`gridTemplateColumns`	The `grid-template-columns` utilities like `grid-cols-7`
`gridTemplateRows`	The `grid-template-rows` utilities like `grid-rows-4`
`height`	The `height` utilities like `h-72`
`hueRotate`	The `hue-rotate` utilities like `hue-rotate-30`
`inset`	The `inset` utilities like `top-44`
`invert`	The `invert` utilities like `invert-0`
`isolation`	The `isolation` utilities like `isolate`
`justifyContent`	The `justify-content` utilities like `justify-center`
`justifyItems`	The `justify-items` utilities like `justify-items-end`
`justifySelf`	The `justify-self` utilities like `justify-self-end`
`letterSpacing`	The `letter-spacing` utilities like `tracking-normal`
`lineHeight`	The `line-height` utilities like `leading-9`
`listStylePosition`	The `list-style-position` utilities like `list-inside`
`listStyleType`	The `list-style-type` utilities like `list-disc`
`margin`	The `margin` utilities like `mt-28`
`maxHeight`	The `max-height` utilities like `max-h-36`
`maxWidth`	The `max-width` utilities like `max-w-6xl`
`minHeight`	The `min-height` utilities like `min-h-screen`
`minWidth`	The `min-width` utilities like `min-w-min`
`mixBlendMode`	The `mix-blend-mode` utilities like `mix-blend-color-burn`
`objectFit`	The `object-fit` utilities like `object-fill`
`objectPosition`	The `object-position` utilities like `object-left-top`
`opacity`	The `opacity` utilities like `opacity-50`
`order`	The `order` utilities like `order-8`
`outlineColor`	The `outline-color` utilities like `outline-green-700`
`outlineOffset`	The `outline-offset` utilities like `outline-offset-2`
`outlineStyle`	The `outline-style` utilities like `outline-dashed`
`outlineWidth`	The `outline-width` utilities like `outline-2`
`overflow`	The `overflow` utilities like `overflow-x-hidden`
`overscrollBehavior`	The `overscroll-behavior` utilities like `overscroll-y-contain`
`padding`	The `padding` utilities like `pt-28`
`placeContent`	The `place-content` utilities like `place-content-between`
`placeItems`	The `place-items` utilities like `place-items-end`
`placeSelf`	The `place-self` utilities like `place-self-end`
`placeholderColor`	The placeholder `color` utilities like `placeholder-red-600`
`placeholderOpacity`	The placeholder `color` opacity utilities like `placeholder-opacity-25`
`pointerEvents`	The `pointer-events` utilities like `pointer-events-none`
`position`	The `position` utilities like `absolute`
`preflight`	Tailwind's base/reset styles
`resize`	The `resize` utilities like `resize-y`
`ringColor`	The `ring-color` utilities like `ring-green-700`
`ringOffsetColor`	The `ring-offset-color` utilities like `ring-offset-green-700`
`ringOffsetWidth`	The `ring-offset-width` utilities like `ring-offset-2`
`ringOpacity`	The `ring-opacity` utilities like `ring-opacity-50`
`ringWidth`	The `ring-width` utilities like `ring-4`
`rotate`	The `rotate` utilities like `rotate-6`
`saturate`	The `saturate` utilities like `saturate-100`
`scale`	The `scale` utilities like `scale-x-95`
`scrollBehavior`	The `scroll-behavior` utilities like `scroll-auto`
`scrollMargin`	The `scroll-margin` utilities like `scroll-mt-28`
`scrollPadding`	The `scroll-padding` utilities like `scroll-pt-28`
`scrollSnapAlign`	The `scroll-snap-align` utilities like `snap-end`
`scrollSnapStop`	The `scroll-snap-stop` utilities like `snap-normal`
`scrollSnapType`	The `scroll-snap-type` utilities like `snap-y`
`sepia`	The `sepia` utilities like `sepia-0`
`skew`	The `skew` utilities like `skew-x-12`
`space`	The "space-between" utilities like `space-x-4`
`stroke`	The `stroke` utilities like `stroke-green-700`
`strokeWidth`	The `stroke-width` utilities like `stroke-1`
`tableLayout`	The `table-layout` utilities like `table-auto`
`textAlign`	The `text-align` utilities like `text-center`
`textColor`	The `text-color` utilities like `text-green-700`
`textDecoration`	The `text-decoration` utilities like `overline`
`textDecorationColor`	The `text-decoration-color` utilities like `decoration-green-700`
`textDecorationStyle`	The `text-decoration-style` utilities like `decoration-dotted`
`textDecorationThickness`	The `text-decoration-thickness` utilities like `decoration-4`
`textIndent`	The `text-indent` utilities like `indent-28`
`textOpacity`	The `text-opacity` utilities like `text-opacity-50`
`textOverflow`	The `text-overflow` utilities like `overflow-ellipsis`
`textTransform`	The `text-transform` utilities like `lowercase`
`textUnderlineOffset`	The `text-underline-offset` utilities like `underline-offset-2`
`touchAction`	The `touch-action` utilities like `touch-pan-right`
`transform`	The `transform` utility (for enabling transform features)
`transformOrigin`	The `transform-origin` utilities like `origin-bottom-right`
`transitionDelay`	The `transition-delay` utilities like `delay-200`
`transitionDuration`	The `transition-duration` utilities like `duration-200`
`transitionProperty`	The `transition-property` utilities like `transition-colors`
`transitionTimingFunction`	The `transition-timing-function` utilities like `ease-in`
`translate`	The `translate` utilities like `translate-x-full`
`userSelect`	The `user-select` utilities like `select-text`
`verticalAlign`	The `vertical-align` utilities like `align-bottom`
`visibility`	The `visibility` utilities like `visible`
`whitespace`	The `whitespace` utilities like `whitespace-pre`
`width`	The `width` utilities like `w-1.5`
`willChange`	The `will-change` utilities like `will-change-scroll`
`wordBreak`	The `word-break` utilities like `break-words`
`zIndex`	The `z-index` utilities like `z-30`

Referencing in JavaScript (자바스크립트에서 참조)

https://tailwindcss.com/docs/configuration#referencing-in-java-script

예를 들어 React 또는 Vue 구성요소에서 인라인 스타일을 동적으로 적용할 때 일부 테마 값에 액세스하는 등 자신의 클라이언트 측 JavaScript에서 구성 값을 참조하는 것이 유용할 수 있습니다.

이를 쉽게 하기 위해 Tailwind는 완전히 병합된 구성 개체의 버전을 생성하는 데 사용할 수 있는 `resolveConfig` 도우미를 제공합니다.

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

이로 인해 빌드 시간 의존성이 크게 증가하여 번들 클라이언트 측 크기가 커집니다. 이를 방지하려면 babel-plugin-preval과 같은 도구를 사용하여 빌드 시 구성의 정적 버전을 생성하는 것이 좋습니다.

저작자표시 비영리 동일조건

'CSS > Tailwind CSS' 카테고리의 다른 글

Tailwind CSS Functions & Directives (0)	2022.05.09
Tailwind CSS 반응형 (0)	2022.05.09
Tailwind CSS Transforms (0)	2022.05.09
Tailwind CSS Animation (0)	2022.05.06
Tailwind CSS Transitions (0)	2022.05.06

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

THE STAR SHINING IN THE MIDDLE