Tailwindcss 테마 설정 및 스크린 사이즈 변수 설정

 

테마 설정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  
  // 이 부분에 추가
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

 

import React, { useEffect } from 'react'

// 버튼 클릭할 때 마다 다크/라이트 모드 변경
const ModeCtrl = () => {
  return (
    <button className='dark:bg-neutral-300 dark:text-neutral-950 bg-neutral-950 text-neutral-300 p-1 m-2' onClick={() => setDarkMode(!darkMode)}>
        버튼
    </button>
  )
}

export default ModeCtrl

 

 

 

 

스크린 사이즈 변수 설정

https://tailwindcss.com/docs/screens#configuring-custom-screens

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {},
    // 이 부분에 추가
    screens: {
      'mb': '390px',
      // => @media (min-width: 390px) { ... }

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

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

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

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