tailwind를 사용하면서 css파일 또한 import하여 사용할 수 있는데, sass의 nesting에 익숙한 개발자라면, css만으로는 아쉬울 것이다. 또 공식문에서는 css파일을 작성할 필요가 없을것이라고 확언하지만, 내가 써본결과는 그렇지만은 않기도 하니 이글을 작성하는 것이다.

23년 8월경에 css가 업데이트 되면서 최신 브라우저에서는 별다른 설정 없이도 중첩을 쓸 수 있게 되었지만, 기존의 sass와 같지는 않고, 또 제한적이다.

그렇다고 해서 sass를 사용하기도 좀 껄끄러운게, tailwind를 사용하면서 전처리기의 sass를 쓰는걸 tailwind측에서 권장하지 않는다. 참조

왜냐하면 tailwind자체가 postcss의 플러그인으로써 동작하고 있고, postcss가 전처리기의 역할을 담당하고 있는데, 굳이 왜 다른 전처리기를 쓰냐는 것이다.

sass나 stylus를 사용하지 않고서 css nesting(중첩)이나 import를 사용하려면, postcss를 사용하면 된다.

참조

방법은 어렵지 않다. 공식문서에 나와있는 그대로 따라하면 된다.

• 설치

npm install -D postcss postcss-import autoprefixer postcss-nesting

• 설정

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

이렇게 설정까지 다 하고서 css파일을 열었는데도, 상단에 위치한 tailwind 지시자들에 빨간 및줄에 당황할 수도 있다.

@tailwind base;
@tailwind components;
@tailwind utilities;

이는 vscode(ide)의 기본 css lint에서 경고를 띄우는 건데, 이를 해결하려면 css에서 별도로 lint설정을 할 수 있게하는 stylelint를 사용해서 이를 해결 할 수 있다.

npm i -D stylelint stylelint-config-recommended

{
  "extends": "stylelint-config-recommended",
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen"
        ]
      }
    ]
  }
}