[tailwind css] 반응형 및 color 셋팅

프로젝트를 진행하기 전에 먼저 세팅하면 좋은 tailwind 반응형과 color 셋팅이다.

 

반응형 셋팅 코드

모바일 퍼스트 버전 tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

 

 

 

데스크톱 퍼스트 버전 tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

      'xl': {'max': '1279px'},
      // => @media (max-width: 1279px) { ... }

      'lg': {'max': '1023px'},
      // => @media (max-width: 1023px) { ... }

      'md': {'max': '767px'},
      // => @media (max-width: 767px) { ... }

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
    }
  }
}

 

모바일은 min-width를 기준으로, 데스크톱은 max-width를 기준으로 잡는다. 

 

 

적용

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <p className="lg:text-blue-600">안녕하세요</p>
    </main>
  );
}

 

 

결과 화면

 

min-width:1024일 때에 해당하는 lg를 사용하여 스크린의 가로가 1024 이상일 경우 글씨의 색이 파란색으로 변하는 걸 볼 수 있다.

 

컬러 지정

자주 사용하는 컬러를 지정해서 사용할 수 있다. 

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    }
  }
}

 

 

적용

/src/app/page.tsx

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <p className="lg:text-dddd">안녕하세요</p>
    </main>
  );
}

 

tailwind.config.ts

colors: {
      blue: "#1fb6ff",
      purple: "#7e5bef",
      pink: "#ff49db",
      orange: "#ff7849",
      green: "#13ce66",
      yellow: "#ffc82c",
      "gray-dark": "#273444",
      gray: "#8492a6",
      "gray-light": "#d3dce6",
      dddd: "#3cff00"
    }

 

테스트로 dddd 라는 이상한 명칭의 연두색을 설정했다.

아래와 같이 설정한 색상이 잘 적용된 걸 볼 수 있다. 

 

 

결과

 

프로젝트에 아주 유용하게 사용할 수 있을 것 같다.