Preprocessor와 함께 사용하기

Tailwind는 PostCSS 플러그인이기 때문에, Autoprefixer와 같은 다른 PostCSS 플러그인과 마찬가지로 Sass, Less, Stylus 또는 다른 전처리기와 함께 사용할 수 있습니다.

Tailwind와 함께 전처리기를 사용할 필요는 없다는 점을 명심하세요. Tailwind 프로젝트에서는 일반적으로 CSS를 거의 작성하지 않기 때문에, 전처리기를 사용하는 것이 많은 커스텀 CSS를 작성하는 프로젝트만큼 유용하지 않습니다.

이 가이드는 권장 사항이 아니라, 통제할 수 없는 이유로 Tailwind와 전처리기를 통합해야 하는 사람들을 위한 참고 자료로 존재합니다.

---

​PostCSS를 전처리기로 사용하기

새로운 프로젝트에서 Tailwind를 사용하고 기존 Sass/Less/Stylus 스타일시트와 통합할 필요가 없다면, 별도의 전처리기 대신 PostCSS 플러그인을 활용하여 필요한 기능을 추가하는 것을 적극 고려해 보세요.

이 방식에는 몇 가지 장점이 있습니다:

• 빌드 속도가 빨라집니다. CSS를 여러 도구에서 파싱하고 처리할 필요가 없기 때문에 PostCSS만 사용하면 CSS 컴파일 속도가 훨씬 빨라집니다.
• 꼼수나 우회 방법이 필요 없습니다. Tailwind는 CSS에 몇 가지 비표준 키워드(예: @tailwind, @apply, theme() 등)를 추가하기 때문에, 기존 전처리기에서 예상한 결과를 얻으려면 번거롭고 직관적이지 않은 방식으로 CSS를 작성해야 하는 경우가 많습니다. PostCSS만 사용하면 이런 문제를 피할 수 있습니다.

사용 가능한 PostCSS 플러그인의 상당히 포괄적인 목록은 PostCSS GitHub 저장소에서 확인할 수 있습니다. 여기서는 우리 프로젝트에서 사용하고 추천할 만한 중요한 플러그인 몇 가지를 소개합니다.

​빌드 타임 임포트

프리프로세서가 제공하는 가장 유용한 기능 중 하나는 CSS를 여러 파일로 나누고, 브라우저에서 처리하는 대신 빌드 타임에 @import 문을 미리 처리하여 결합할 수 있다는 점입니다.

PostCSS에서 이를 처리하기 위한 표준 플러그인은 postcss-import입니다.

이 플러그인을 사용하려면 npm을 통해 설치하세요:

npm install -D postcss-import

그런 다음 PostCSS 설정에서 가장 첫 번째 플러그인으로 추가하세요:

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

postcss-import에 대해 주의할 점은 CSS 사양을 엄격히 준수하며, 파일의 맨 위를 제외한 다른 곳에서는 @import 문을 허용하지 않는다는 것입니다.

/* components.css */

.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* 작동하지 않음 */
@import "./components/card";

이 문제를 해결하는 가장 쉬운 방법은 일반 CSS와 임포트를 같은 파일에 섞지 않는 것입니다. 대신, 임포트를 위한 메인 진입점 파일을 하나 만들고, 실제 CSS는 별도의 파일에 보관하세요.

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* components/card.css */
.card {
  padding: theme('spacing.4');
  /* ... */
}

이 상황을 가장 자주 마주하게 되는 곳은 @tailwind 선언을 포함하는 메인 CSS 파일입니다.

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

이 문제를 해결하려면 각 @tailwind 선언을 위한 별도의 파일을 만들고, 메인 스타일시트에서 이 파일들을 임포트하면 됩니다. 이를 쉽게 하기 위해, 우리는 각 @tailwind 선언을 위한 별도의 파일을 기본 제공하며, 이 파일들은 node_modules에서 직접 임포트할 수 있습니다.

postcss-import 플러그인은 node_modules 폴더에서 파일을 자동으로 찾을 수 있으므로, 전체 경로를 제공할 필요가 없습니다. 예를 들어 "tailwindcss/base"만으로 충분합니다.

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

​중첩(Nesting)

중첩 선언을 지원하기 위해, 우리는 tailwindcss/nesting 플러그인을 권장합니다. 이 플러그인은 PostCSS 플러그인으로, postcss-nested 또는 postcss-nesting을 감싸는 역할을 하며, 선택한 중첩 플러그인이 Tailwind의 커스텀 문법을 올바르게 이해할 수 있도록 호환성 레이어 역할을 합니다.

이 플러그인은 tailwindcss 패키지에 직접 포함되어 있으므로, PostCSS 설정에 추가하기만 하면 됩니다. 단, Tailwind보다 앞에 위치해야 합니다:

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

기본적으로 이 플러그인은 postcss-nested를 사용하며, 이는 Sass와 유사한 문법을 사용합니다. 이 플러그인은 Tailwind CSS 플러그인 API에서 중첩 지원을 제공하는 데 사용됩니다.

만약 postcss-nesting을 사용하고 싶다면 (이는 표준 CSS Nesting 사양을 기반으로 함), 먼저 플러그인을 설치하세요:

npm install -D postcss-nesting

그런 다음 PostCSS 설정에서 tailwindcss/nesting에 플러그인 자체를 인자로 전달하세요:

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

이 방법은 특정 버전의 postcss-nested를 사용해야 하거나 tailwindcss/nesting에 포함된 버전을 재정의해야 할 때 유용할 수 있습니다.

만약 프로젝트에서 postcss-preset-env를 사용하고 있다면, 중첩 기능을 비활성화하고 tailwindcss/nesting이 이를 처리하도록 해야 합니다:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
  }
}

​변수

요즘 CSS 변수(공식적으로는 커스텀 프로퍼티라고 함)는 브라우저 지원이 매우 좋아서, 변수를 사용하기 위해 전처리기를 사용할 필요가 전혀 없습니다.

:root {
  --theme-color: #52b3d0;
}

/* ... */

.btn {
  background-color: var(--theme-color);
  /* ... */
}

우리는 Tailwind 내부에서 CSS 변수를 광범위하게 사용합니다. 따라서 Tailwind를 사용할 수 있다면, 네이티브 CSS 변수도 사용할 수 있습니다.

또한, 과거에 변수를 사용했던 대부분의 경우를 Tailwind의 theme() 함수로 대체할 수 있습니다. 이 함수를 사용하면 tailwind.config.js 파일에 있는 모든 디자인 토큰에 직접 접근할 수 있습니다.

.btn {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.2') theme('spacing.4');
  /* ... */
}

theme() 함수에 대해 더 자세히 알아보려면 함수와 지시문 문서를 참고하세요.

​벤더 프리픽스

CSS에서 벤더 프리픽스를 자동으로 관리하려면 Autoprefixer를 사용해야 합니다.

Autoprefixer를 사용하려면 npm을 통해 설치하세요:

npm install -D autoprefixer

그런 다음 PostCSS 설정 파일에서 플러그인 목록의 가장 마지막에 추가하세요:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

---

​Sass, Less, Stylus 사용하기

최상의 개발 경험을 위해, 우리는 여러분이 PostCSS만 사용하고, Tailwind 프로젝트에서 Sass나 Less 같은 전처리기를 사용하지 않기를 강력히 권장합니다.

Sass, Less, Stylus 같은 전처리 도구와 함께 Tailwind를 사용하려면, 프로젝트에 추가 빌드 단계를 도입해 전처리된 CSS를 PostCSS로 처리해야 합니다. 프로젝트에서 Autoprefixer를 사용하고 있다면, 이미 이와 유사한 설정이 되어 있을 것입니다.

Tailwind를 PostCSS 플러그인으로 설치하는 방법에 대한 자세한 내용은 Tailwind를 PostCSS 플러그인으로 설치하기 문서를 참고하세요.

전처리기와 함께 Tailwind를 사용할 때 가장 중요한 점은 Sass, Less, Stylus 같은 전처리기가 Tailwind보다 먼저 독립적으로 실행된다는 것입니다. 이는 예를 들어 Tailwind의 theme() 함수 출력을 Sass 색상 함수에 전달할 수 없다는 것을 의미합니다. 왜냐하면 theme() 함수는 Sass가 CSS로 컴파일되고 PostCSS에 전달될 때까지 실제로 평가되지 않기 때문입니다.

.alert {
  background-color: darken(theme('colors.red.500'), 10%);
}

이 외에도, 일부 전처리기는 Tailwind와 함께 사용할 때 특이한 동작을 보일 수 있으며, 이에 대한 해결 방법은 아래에 설명되어 있습니다.

​Sass

Tailwind를 Sass와 함께 사용할 때, @apply와 함께 !important를 사용하려면 제대로 컴파일되도록 인터폴레이션을 사용해야 합니다.

.alert {
  @apply bg-red-500 !important;
}

.alert {
  @apply bg-red-500 #{!important};
}

이 외에도, Sass는 괄호로 감싸지 않으면 Tailwind의 screen() 함수를 제대로 처리하지 못합니다.

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media (screen(md)) {
  .foo {
    color: blue;
  }
}

기술적으로 이렇게 하면 미디어 쿼리 주위에 추가 괄호가 생기지만, 여전히 잘 작동합니다.

​Stylus

Tailwind를 Stylus와 함께 사용할 때, Stylus가 이를 일반 CSS로 처리하도록 하려면 전체 CSS 규칙을 @css로 감싸야 합니다. 그렇지 않으면 Tailwind의 @apply 기능을 사용할 수 없습니다.

.card {
  @apply rounded-lg bg-white p-4
}

@css {
  .card {
    @apply rounded-lg bg-white p-4
  }
}

하지만 이 방법에는 큰 단점이 있습니다. @css 블록 내에서는 어떤 Stylus 기능도 사용할 수 없습니다.

다른 방법으로는 @apply 대신 theme() 함수를 사용하고, 실제 CSS 속성을 길게 작성하는 것입니다:

.card {
  border-radius: theme('borderRadius.lg');
  background-color: theme('colors.white');
  padding: theme('spacing.4');
}

또한, Stylus는 Tailwind의 screen() 함수를 사용할 때 문제가 발생할 수 있습니다. 이를 해결하려면 보간법을 사용하고 괄호로 감싸야 합니다.

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media ({'screen(md)'}) {
  .foo {
    color: blue;
  }
}

기술적으로 이 방법은 미디어 쿼리 주위에 추가 괄호를 생성하지만, 여전히 작동합니다.