[TIL] 내배캠4기-NextJs-94일차

Tailwind CSS

• 장점: 클래스명에 대한 고민을 안해도 됨
  직관적이다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js 파일 생성

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,tsx,ts}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],

📌 pages 디렉토리에 있는 모든 폴더에 있는 모든 파일에 적용하겠다 는 의미.
💡 ex) *.{tsx} : tsx 확장자 파일에만 tailwind css를 적용하겠음!

py px padding

<div className="bg-slate-400 py-10">

py 와 숫자 의미

.py-10 {
    padding-top: 2.5rem/* 40px */;
    padding-bottom: 2.5rem/* 40px */;
}

💡 px는 left, right!!

space-y-{amount}

모든 자식 요소에 margin-top, margin-bottom 생성

 return (
    <div className="bg-slate-400 py-10 px-5 flex flex-col space-y-5">
      <div className="bg-white p-10 rounded-2xl"></div>
      <div className="bg-white p-10 rounded-2xl"></div>
      <div className="bg-white p-10 rounded-2xl"></div>
      <div className="bg-white p-10 rounded-2xl"></div>
    </div>

<div className="bg-slate-400 py-10 px-5 grid gap-10">

== display: grid
grid와 gap 속성으로 위와 똑같은 화면 구성이 가능하다.

Focus rings

<button className="w-5 h-5 rounded-full bg-yellow-500 focus:ring-2 ring-offset-2 ring-yellow-500"></button>

ring-{width}

ring offset과 color는 변수인 것을 확인할 수 있다. 따라서 focus를 ring-{width} 앞에만 붙여줘도 전부 적용된 것과 같이 동작한다.