Tailwind:Functions

theme()

점 표기법을 사용하여 Tailwind 구성 값에 액세스하려면 theme() 함수를 사용하십시오.

선언의 일부에 대해서만 테마 구성의 값을 참조하려는 경우 @apply 대신 유용한 대안이 될 수 있습니다.

.content-area {
  height: calc(100vh - theme('spacing.12'));
}

점이 포함된 값(spacing scale의 2.5 값처럼)에 액세스해야 하는 경우 대괄호 표기법을 사용할 수 있습니다.

.content-area {
  height: calc(100vh - theme('spacing[2.5]'));
}

Tailwind는 중첩된 객체 구문을 사용하여 기본 색상 팔레트를 정의하므로, 점 표기법을 사용하여 중첩된 색상에 액세스해야 합니다.

중첩된 색상 값에 액세스할 때 대시 구문 사용 안 함

.btn-blue {
  background-color: theme('colors.blue-500');     // ERROR !!!
}

점 표기법을 사용하여 중첩된 색 값에 액세스

.btn-blue {
  background-color: theme('colors.blue.500');
}

screen 기능을 사용하면 자신의 CSS에 있는 값을 복제하는 대신 이름으로 중단점을 참조하는 미디어 쿼리를 만들 수 있습니다.

@media screen(sm) {
  /* ... */
}

이렇게 하면 빌드 시 기본 화면 값으로 해결되어 지정된 중단점과 일치하는 일반 미디어 쿼리가 생성됩니다.

@media (min-width: 640px) {
  /* ... */
}