Tailwindcss) customizing - jit, px

설치법은 아래 포스팅에서 확인하자.

https://juzdalua.tistory.com/71

Vue3) Tailwind css 적용하기

 

Vue3에서는 tailwind, postcss 최신버전을 지원하지 않는다.

tailwind.config.js를 설치하면 jit모드와 커스터마이징을 할 수 있다.

 

Jit Mode

https://v2.tailwindcss.com/docs/just-in-time-mode

Just-in-Time Mode - Tailwind CSS

 

Vue3에서 px을 사용하려면 jit모드를 설치하거나 커스터마이징을 해야한다.

기본적으로 tailwindcss는 px이 아닌 rem으로 지원하고, 원하는 rem이 아닌 정해진 규약을 따라야한다.

 

나는 pixel이 익숙하여 jit모드를 설치해서 사용하다 카카오 개발팀의 커스터마이징을 사용하고 있다.

module.exports = {
  mode: 'jit',
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      spacing: {
      },
      keyframes: {
      },
      animation: {
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

mode: 'jit'을 설정하면 px을 사용할 수 있다.

 

class = "p-1" // padding: 1rem;
class = "p-[1px]" // ppding: 1px;

이렇게 사용하다보니 손가락이 꼬일때가 있어 카카오팀의 커스텀을 사용했다.

또한 각종 기능을 사용하려면 부가 수식어가 필요한데, jit모드를 사용하면 그렇지 않아도 된다.

 

class = "transform animate-spin" // without jit mode
class = "animate-spin" // with jit mode

그래서 px 커스텀은 카카오팀 덕분에 해결했지만, 계속 jit 모드를 사용중이다.

 

 

tailwind customizing

https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/

Tailwind CSS 사용기

const px0_10 = { ...Array.from(Array(11)).map((e, i) => `${i}px`) };
const px0_100 = { ...Array.from(Array(101)).map((e, i) => `${i}px`) };
const px0_200 = { ...Array.from(Array(201)).map((e, i) => `${i}px`) };
const px0_300 = { ...Array.from(Array(301)).map((e, i) => `${i}px`) };
const px0_400 = { ...Array.from(Array(401)).map((e, i) => `${i}px`) };

module.exports = {
  mode: 'jit',
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      borderWidth: px0_10,
      fontSize: px0_100,
      lineHeight: px0_400,
      minWidth: px0_200,
      minHeight: px0_200,
      spacing: px0_400,
      keyframes: {
        rotateX: {
          '0%, 100%': { transform: 'rotate(0deg)' },
          '50%': { transform: 'rotate(360deg)' }
        }
      },
      animation: {
        rotateX: 'rotateX 2s ease-in-out infinite'
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

extend에 1px부터 매칭을 해줬다.

이렇게 하면 해당 어레이 매칭 이상부터는 rem으로, 커스텀한 숫자까지는 rem 대신 px로 사용이 가능하다.

나는 400까지 margin, padding을 주로 사용하여 현재는 400까지 어레이를 늘렸다.

 

class = "p-1" // padding: 1px;

 

 

VSC extension

class에 기입한 코드들을 정렬해주는 익스텐션이다. 중복작성 할 위험이 줄어든다.

보다 수월한 코딩이 가능해졌다.

tailwind를 사용한지 이틀이 지났는데 css가 제일 자신없었던 부분이 조금은 해소되었다.