[Tailwind] tailwindcss cli

프론트 개발을 한다고 하였을때 특히 js 관련 프로젝트를 진행한다고 하였을 때 tailwind를 모르기란 쉽지않다.

 

오랜만에 프론트 진행을 하였는데 가벼운 프로젝트라 python 으로 서버를 돌리고 jinja 템플릿을 조금 사용하고 js로 함수로 기능을 붙이고.. 하였다..

 

이때 css의 사용 편의성을 위하여 tailwind를 사용하였는데 커스텀이 필요하였다.

 

처음에는 아래와 같이 tailwindcss를 기본적으로 넣고 수정이 커스텀 css 들을 작성하여 반영하는 방식으로 하였다.

<script src="/static/js/tailwind.js"></script>
<script type="module">
      import { config } from '/static/tailwind-config.js';
      tailwind.config = config;
</script>

 

근데 이렇게 했을 경우 문제점이 자꾸 모듈을 넣어줘야하니까 화면이 깜박깜박거리는 것이다.

엄청나게 거슬린다.

 

그래서 그걸 고치는 방법을 찾아봤는데 tailwindcss cli 로 패키징을 다시해주는듯하다.

 

원래는 이렇게 사용하는게 아닌 버전관리를 안하고 독립적으로 사용할 수 있도록 하는것 같은데, 그게 그건가..(?)

여튼 하는 방법은 npm을 사용한다면 npm으로 tailwindcss를 install해서 하면 되는데

 

node 버전이 안맞는데 node버전 맞추는것도 바빠서 그런가 하려고하니 아주 난리가 나서 그냥 다운로 받았다.

 

-- 다운로드 링크 --
<!-- 윈도우는 꼭 v3 으로 -->
https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.15
https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.1

 

다운로드 후 이름을 바꿔준다. tailwindcss.exe로!

<!-- download -->
tailwindcss-windows-x64.exe 
<!-- rename -->
tailwindcss.exe

 

그리고 input.css를 만들어주고, 커스텀으로 사용하고 있던 config.js가 있다면 복사해서 cjs로 하나 만들어주자.
<!-- file create -->
touch input.css
cp tailwind-config.js tailwind.config.cjs

 

그 후 아래와 같은 모양으로 되어있는 config.js를

const pxToRem = (px, base = 16) => `${px / base}rem`;
const range = (start, end) => {
  const arr = [];
  const length = end - start;
  for (let i = 0; i <= length; i++) {
    arr[i] = start;
    start++;
  }
  return arr;
};

export const config = {
  theme: {
    screens: {
    },
    extend: {
      colors: {
        // pirmary
        "primary-900": "#052454",
        "state-lime-50": "#F9FBE7",
      },
      spacing: {
        ...range(0, 1000).reduce((acc, px) => {
          acc[`${px}pxr`] = pxToRem(px);
          return acc;
        }, {}),
      },
    }
  }
};

 

요렇게 바꾸고 추가도 해준다.

const pxToRem = (px, base = 16) => `${px / base}rem`;
const range = (start, end) => {
  const arr = [];
  const length = end - start;
  for (let i = 0; i <= length; i++) {
    arr[i] = start;
    start++;
  }
  return arr;
};

module.exports = {
  content: [ // ⬅️ 이거 반드시 있어야 합니다!
    "./templates/**/*.html",   // ✅ 상대 경로 glob만 사용 (절대경로 ❌)
    "./static/js/**/*.js",
    "./static/datatables/**/*.js",
    "./static/datatables/**/*.css",
  ],
  theme: {
    screens: {
    },
    extend: {
      spacing: {
        ...range(0, 1000).reduce((acc, px) => {
          acc[`${px}pxr`] = pxToRem(px);
          return acc;
        }, {}),
      },
      colors: {
        // pirmary
        "primary-900": "#052454",
        "state-lime-50": "#F9FBE7",
      },
    },
    // width: theme => theme('spacing'),   // ⬅️ 이게 없으면 w-xxxpxr 안됨
    // height: theme => theme('spacing'),  // ⬅️ 이게 없으면 h-xxxpxr 안됨
  }
};

 

중요 변경점은 모듈을 ESModule 이거에서 CommonJS로 변경을 해주었고, 내가 사용하고 있는 항목들을 확인할 수 있도록 content를 넣어주었다.

 

그후 powershell로 root 경로에서 아래 처럼 만들어서 import하면 끝!

<!-- powershell 프로젝트 root 경로에서 실행 -->
.\tailwindcss.exe -c tailwind.config.cjs -i input.css -o ./static/css/tailwind.css --minify
<!-- 생성된거 확인 -->
/static/css/tailwind.css
<!-- base.html에 삽입 -->
<link rel="stylesheet" href="/static/css/tailwind.css">

좋다좋다 예쁘게 안 깜박 거리고 잘 나온다 : ) 해피해피!

 

나같은 경우 datatable을 사용했는데 이건 안먹길래 봤더니 content에 넣어주니까 잘됬다! 이렇게 안먹히는거 있으면 content에 넣어보자!