Tailwind 재사용하기 이렇게 키워드를 이용해서 설정후 이렇게 사용해줄 수 있다. Adding Custom Styles 파일을 통해서 사용자 정의 스타일 및 커스텀 클래스를 추가 할 수 있다. 이제 bg-blue를 사용해주면 기존 tailwind 색상이아닌,색상으로 나오게된다. Functions & Directives Tailwind의 함수와 디렉티브 사용으로 Tailwind를 더욱 확장성있게 사용할 수 있고, 커스텀마이징 할 수있다. Functions theme(): 테마 값을 동적으로 읽음 screen(): 미디어쿼리를 동적으로 생성할 수 있음 Directives 디렉티브를 사용해서 조건에 따라 요소의 스타일을 조절할 수 있다. @tailwind: HTML 요소에 Tailwind CSS클래스를 동적으로 추가 가능하다. @layer: CSS 규칙을 레이어별로 구성할 수 있게 해준다. @apply: CSS클래스를 동적으로 적용할 수 있다. @config: Tailwind…

이 게시글은 이곳을 참고하여 요약하여 작성하였습니다. MUI MUI는 리액트 라이브러리 중 하나로 MUI는 구글의 디자인 철학인 을 구현한 자바스크립트 라이브러리입니다. 실은 materialUI라고 불리던 MUI는 5버전으로 리뉴얼 되면서 기존의 materialUI라는 이름을 버리고 MUI라는 이름으로 바뀌었다고 합니다. mui의 sx와 inline style의 차이점 원문 게시글을 요약하는 게시글이기 때문에 여기부턴 편하게 글을 작성하겠습니다. inline style html을 반환하는 jsx 문법은 react가 변환할 때 모든 속성이 props 객체의 일부가 된다. 따라서 랜더링때마다 style 객체가 계산되어 성능과 재사용 부분에서 추천하지 않는다. Mui sx sx의 사용예시는 inline style과 비슷하다. styled-component화 되어 적용된다. mui의 theme를 기반으로 css를 적용할 수 있다. (다크모드,미디어 쿼리,css단축약어 적용 등..) 재사…