[react-project] tailwind 사용하기

 

** tailwind.config.js

- 사용자 원하는대로 설정해서 사용이 가능한 테일윈드!

- 다크모드, 메인 색상, 폰트, 반응형 breakpoint 설정이 가능

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        "accent-blue": "#1976D2",
      },
      fontFamily: {
        logo: ["logo"],
      },
      maxWidth: {
        128: "32rem",
      },
    },
    screens: {
      mobile: { min: "320px", max: "767px" },
      tablet: { min: "768px", max: "1534px" },
      note: { max: "1536px" },
    },
  },
  plugins: [],
};

 

 

margin: 0 auto	mx-auto
padding-left padding-right	px-n
padding-top padding-bottom	py-n
border-radius	rounded-lg

 

 

*** 반응형

https://tailwindcss.com/docs/responsive-design

 

 

---

※ cheat sheet

https://nerdcave.com/tailwind-cheat-sheet