Install Tailwind CSS using PostCSS - Tailwind CSS

<aside> 🔥 Postcss 컴파일러와 autoprefixer, tailwindcss 라는 postcss 플러그인 설치

</aside>

npm i tailwindcss postcss autoprefixer -D   // 설치

// postcss.config.js 파일 생성
// 붙이기

/** @type {import('postcss-load-config').Config} */
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

// tailwindcss 전용 설정 만들기.(폴더만들어진다)

npx tailwindcss init   // 설치

// 생성된 파일에 붙이기  - tailwond.confing.js

/** @type {import('tailwindcss').Config} */
export default {
	content: ["./index.html", "./src/**/*.jsx"],
  theme: {
    extend: {},
  },
  plugins: [],
}

// src/index.css 에 붙이기

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Group

<aside> 🔥 class = “group” 으로 지정을 해놓으면 div 박스 안에있는 모든 자식들의 css를 컨트롤 할 수 있다.

</aside>

<div class="group">
<button name="delete" class="hidden group-hover:block">
</div>

Peer

<aside> 🔥 Peer 는 형제 요소에 하는 스타일링 적용하고싶은 것들의 형제요소지만 바로 위에있어야만 peer를 사용할 수있다.

</aside>

<input name="hidden-check" class="hidden peer" type="checkbox" />

<span name="check" class="peer-checked:bg-green-500 peer-checked:border-green-500 peer-checked:text-white flex items-center justify-center w-5 h-5 text-transparent border-2 border-gray-500 rounded-full">

<aside> 🔥 peer/… 란 ? peer의 별명을 만드는거와 비슷하다.

ID 가 todo 라는 거에만 영향을 준다.

형제 요소를 구분짓기위한 ID값이라고 생각해도 좋다.

peer는 아래에 있는 형제에게 영향을 주고 id로 구분한다

</aside>

<input class="**peer/todo** flex-grow h-8 ml-4 bg-transparent focus:outline-none font-medium" type="text" id="todo" name="todo" required placeholder="add a new todo"/>

<button id="reset" class="h-8 px-2 text-sm font-medium rounded peer-invalid/todo:hidden"
>