03.30

2023.03.30일(목)

REACT

npx create-react-app dapp <- 설치없이 리액트 이용(?) -(대문자로 이름만들기 x)
npm run start <-리액트 스타트(?)

• css파일 지우기, import 지우기

TailWind CSS 설치법

• 참고사이트 : https://tailwindcss.com/docs/guides/create-react-app

1. npm install -D tailwindcss
2. npx tailwindcss init
3. tailwind.config.js파일 content 부분에 "./src//*.{js,jsx,ts,tsx}",복붙**
4. @tailwind base; @tailwind components; @tailwind utilities;를 index.css 생성 후 복사붙여넣기해주고 index.js에 import해주기

Tailwind 팁

중복되는 요소들 묶어서 클래스에 넣기

@layer components {
  .btn-style {
    @apply px-2 py-1 rounded-md text-gray-100 cursor-pointer;
  }
}```

팁2

#123123과 같이 tailwind 색 넣어주기

/ @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src//*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        main: {
          100: "#f1c40f",
          200: "#07bc0c",
        },
      },
    },
  },
  plugins: [],
};```