[CSS] Tailwind에서 중첩된 CSS가 감지되었다는 경고 : Nested CSS was detected...

1. 중첩된 CSS가 감지되었다고?

(8:3) Nested CSS was detected, but CSS nesting has not been configured correctly. Please enable a CSS nesting plugin *before* Tailwind in your configuration. See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

진행 중인 Next.js 프로젝트의 layout에 스타일을 지정하려고 했고, 이때 다른 프로젝트의 SCSS 코드 일부를 복붙 했더니 발생한 경고문이다. 이유는 복붙 한 스타일 코드에 중첩 CSS가 포함되어 있어서였다. 이 포스팅에서는 중첩 CSS에 대해-핵심만-간략하게 정리해보고자 한다.

 

2. 중첩된 CSS

SCSS(Sass) 경우에는 중첩된 CSS 규칙을 지원하는데, 스타일을 부모 요소 안에 자식 요소를 중첩하여 표현한다. 이것은 HTML의 구조와 유사한 방식으로 CSS를 작성할 수 있음을 의미한다.

2.1. 기본 구조

아래 SCSS 코드는 중첩된 CSS 규칙을 사용하여 내비게이션 메뉴 스타일을 정의한 것이다. 이러한 중첩된 구조를 사용하면 코드의 가독성이 향상되고, CSS의 구조가 HTML 구조와 일치하도록 유지할 수 있다.

nav {
  ul {
    list-style: none;
  }
  li {
    display: inline;
    margin-right: 10px;
    a {
      text-decoration: none;
    }
  }
}

 

2.2. 부모 참조 : &

& 기호를 사용하여 부모 요소에 대한 참조를 생성할 수 있다. 이것은 주로 가상 클래스 및 가상 요소와 함께 사용된다. 아래의 SCSS 코드에서 &를 사용하여 .btn 클래스에 대한 참조를 생성하고, .primary 및 :hover와 함께 사용되어 버튼의 다양한 상태에 대한 스타일을 지정하였다.

.btn {
  display: inline-block;
  &.primary {
    background-color: blue;
  }
  &:hover {
    background-color: lightblue;
  }
}

 

3. Tailwind CSS와 Nested CSS

다시 처음에 봤던 경고 메시지로 돌아가보자! Tailwind CSS는 CSS 중첩을 기본적으로 지원하지 않는다. 따라서 중첩된 CSS를 사용하려면 PostCSS 플러그인 중 하나를 사용해야 한다. 이 경고 메시지에 관련한 Tailwind 공식 문서의 "https://tailwindcss.com/docs/using-with-preprocessors#nesting"을 읽어보면 postcss-nested 또는 postcss-nesting 플러그인을 추가하여 사용하라고 안내되어 있다.

'SCSS와 함께 사용하면되지 않을까?' 하는 의문이 생겼다. 그런데 위 문서에 의하면 최상의 개발 경험을 위해서 Tailwind 프로젝트에서는 PostCSS만 사용 하고 Sass 또는 Less와 같은 전처리기를 사용하지 않는 것이 좋다고 한다(https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus).