react tailwind setting, config

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

tailwind 도입한 이유 
https://fe-developers.kakaoent.com/2022/221013-tailwind-and-design-system/

 

tailwind config 

px로 작업하는경우 단위 변경을 위해 변수세팅을 한다.

animation도 정의할 수 있음

/** @type {import('tailwindcss').Config} */

const px0_10 = { ...Array.from(Array(11)).map((_, i) => `${i}px`) };
const px0_100 = { ...Array.from(Array(101)).map((_, i) => `${i}px`) };
const px0_200 = { ...Array.from(Array(201)).map((_, i) => `${i}px`) };

export default {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}', './index.html'],
  theme: {
    extend: {
      borderWidth: px0_10,
      fontSize: px0_100,
      lineHeight: px0_100,
      minWidth: px0_200,
      minHeight: px0_200,
      spacing: px0_200,
      colors: {
        black: '#000',
        gray: {
          100: '#f4f4f4',
          200: '#EBEBEB',
          300: '#E0E0E0',
          400: '#A09F9E',
          500: '#ADADAD',
          600: '#959595',
          700: '#757575',
          800: '#666666',
          900: '#333333'
        },
        white: '#fff'
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' }
        },
        zoom: {
          '0%': { transform: 'scale(1.4)' },
          '100%': { transform: 'scale(1)' }
        }
      }
    }
  },
  plugins: []
};

 

tailwind 장단점

장점: 

클래스명 생각안해도 된다. 

소규모 프로젝트에서 빠르게 만들어내는 경우 유용할듯하다. 

 

단점: 

가상선택자 사용시 너무 불편 다 선언해줘야하고 

공통된 ui가 있는경우 선언이 불편하다. 이런경우 css로 공통으로 만들어서 적용하는게 좋은데 그럼 테일윈드 사용하는 이유가 없는거 같기도 

대규모 복잡한 ui를 작업할때는 더 힘들수 있을듯하다. 

처음 접하면 하나하나 속성 찾아보면서 적용해야함