TailwindCSS 전처리기 사용 및 확장 사용법

tailwindCSS는 postCSS 플러그인이다.
tailwindCSS 기술 외에 다른 기술들을 융합해서 쓰고 싶다면,
기존의 postCSS의 추가적인 플러그인을 사용해서 하는 것이 유리하다.

빌드도 따로 필요하지않고 처리도 빠르다는 점이다.

그래서

postcss-import & postcss-nesting

import로 tailwind 별도의 스타일링이 가능하며,
따로 파일로 만들어서 css처럼 사용할 수있다.

이외에도 var나 theme()를 사용할 수 있는 플러그인
postcss-nesting 사용하였다.

npm install -D postcss-import postcss-nesting

---
postcss.config.js

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

다운로드 이후에 포스트 css 수정을 해준다.

import해와서 각각 파일도 만들 수 있고,

--bg라고 작성함으로서 기존 스타일에서 다른 스타일로
간편하게 바꿀수있다.
.mega-red -> .mega-red--bg

그리고 특정 변수 값을 var를 통해서 받아올 수 있다.

사용 도중

Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

(114:1) @import must precede all other statements (besides @charset)

라는 오류가 떴는데 import를 최상단에 작성해주면 된다(기존과 동일)

https://tailwindcss.com/docs/using-with-preprocessors#nesting

extend 사용법

테일윈드 아래 사이트를 참고하면 바꿀 수 있는 값들이 있다.
https://tailwindcss.com/docs/theme

중요한 점은 이렇게 추가하면 다른 값들은 잊어버린다.
모든 값들을 정의해주기위해선 다양한 방법이 있는데,

fontSize: new Array(201)
      .fill()
      .map((_, i) => i)
      .reduce((acc, val) => {
        acc[val] = `${val / 10}rem`
        return acc
      }, {}),
      ```
      

 font-size 같은 경우는 모든 값들을 처리해주기 위해서 이렇게 처리한다.