kimia UI

Tailwind CSS로 구축 된 React의 UI 구성 요소 3

왜이 접근법?

Tailwind CSS는 사용자 정의 사용자 인터페이스를 신속하게 구축하기위한 유틸리티 우선 CSS 프레임 워크입니다. IL을 사용하면 HTML을 떠나지 않고 스타일을 쓸 수 있습니다.

Tailwind CSS의 가장 큰 단점은 코드를 너무 길게 읽을 수없는 클래스가 너무 길어질 위험이 있다는 것입니다.

React는 구성 요소 기반이므로 클래스와 함께 구성 요소 로직을 추출하고 다른 곳에서 재사용 할 수있어 더 많은 구성 요소와 더 적은 클래스로 더 읽기 쉬운 코드를 초래할 수 있습니다.

그렇기 때문에이 UI 구성 요소 모음을 완전히 사용자 정의 할 수있는 모음을 만들었습니다. 사용하려는 구성 요소를 복사하여 붙여 넣으십시오.

모든 구성 요소는 패키지 디렉토리에 있습니다.

각 구성 요소에는 2 개의 하위 디렉터가 포함됩니다

• 예 : TypeScript의 구성 요소의 각 변형에 대한 예제를 포함합니다.

• 스 니펫 : 일반 반응에서 구성 요소의 각 변형에 대한 예제를 포함합니다.

? 새 구성 요소를 추가하십시오

새 구성 요소를 추가하려면 :

폴더 내부에서 src/packages/{YourComponentName} 에서 새 디렉토리를 작성하면 2 개의 하위 폴더와 1 개의 파일이 생성됩니다.

• 예 : TypeScript의 구성 요소에 대한 예제가 포함되어 있습니다 **
• 스 니펫 : 일반 반응의 예제가 포함되어 있으며 복사 할 코드 스 니펫으로 사용됩니다.
• {구성 요소 이름} .tsx는 구성 요소의 논리를 포함합니다.

src/pages/components/{구성 요소 이름} 에서 새 파일 (Route)을 만듭니다. 그러면 구성 요소의 모든 예제와 스 니펫을 가져옵니다.

브라우저 지원

이 구성 요소는 모든 브라우저와 호환됩니다

크롬	파이어 폭스	가장자리	원정 여행	오페라

기부금

프로젝트에 기여하거나, 버그 수정, 접근성을 향상 시키거나, 문제를 열고 싶다면 기여 가이드를 따르십시오.

먼저 개발 서버를 실행합니다.

npm run dev
# or
yarn dev

http : // localhost : 3000을 열어 브라우저를 사용하여 결과를 확인하십시오.