React 및 Tailwind CSS가있는 웹 사이트를 구축하십시오

이 자습서는 React 및 Tailwind CSS를 사용하여 제품 웹 사이트를 만드는 방법을 보여줍니다. CRACO (Create React App Configuration Override)를 사용하여 Tailwind CSS로 React를 설정하는 방법을 다룰 것입니다. Tailwind의 CSS 유틸리티 클래스 및 변형 및 사용 방법; 웹 사이트를 쉽게 Dark Mode를 호환하는 방법; 어떤 그룹이; 그리고 변형을 활성화하는 방법.

우리가 여기에서 만들고있는 웹 사이트의 데모를 볼 수 있으며이 github 저장소 에서이 저장소의 코드를 찾을 수 있습니다.

. 키 테이크 아웃

React App 및 Craco 만들기를 활용하여 수동 구성의 복잡성을 피하기 위해 Tailwind CSS와 효율적으로 React를 설정합니다. 테일 윈드 CSS 유틸리티 클래스 및 변형을 광범위한 커스텀 CSS를 작성하지 않고 쉽게 스타일 구성 요소로 활용하십시오. 사용자의 OS 환경 설정에 적응하기 위해 Tailwind CSS의 간단한 구성 변경으로 Dark Mode를 구현하십시오. 반응 형 디자인 및 의사 클래스를위한 유틸리티 클래스의 힘을 탐색하여 스타일링을보다 역동적이고 유연하게 만듭니다. 구성 파일에서 색상, 글꼴 및 기타 요소를 직접 수정하여 브랜딩 요구에 맞게 Tailwind의 테마를 사용자 정의하십시오. Tailwind CSS 플러그인을 사용하고 추가 스타일, 유틸리티 및 사용자 정의 구성 요소를 포함하도록 기능을 확장하십시오. 호버 상태 및 반응 형 조정을위한 특정 테일 윈드 CSS 변형을 활성화하여 웹 사이트의 대화식 및 반응 형 측면을 향상시킵니다.

전제 조건 우리가 시작하기 전에 node.js와 npm을 설치해야합니다. Node.js가 설치된 경우 NPM이 설치됩니다.

노드가 설치되어 있는지 확인하려면 명령 줄에서 다음을 실행하십시오.

버전을 볼 수 있어야합니다. npm에 대해서도 똑같이 수행하십시오 :

Tailwind CSS는 Node.js 버전 12.13.0 이상이 필요하다는 점에 유의해야합니다. 중 하나에 오류가 발생하면 노드를 설치해야합니다. Node 웹 사이트의 설치 지침을 따르거나“NVM을 사용하여 여러 버전의 Node.js 설치”를 따라갈 수 있습니다. 반응 및 꼬리 바람 CSS 설정

참고 : React Create 앱에 익숙하지 않은 경우“React Create : React 프로젝트를 빨리 준비하십시오”를 확인하십시오. 먼저 Create-React-App을 사용하여 React 프로젝트를 만듭니다

그런 다음 디렉토리를 생성 된 프로젝트로 변경하십시오

다음은 Tailwind CSS에 필요한 종속성을 설치합니다

우리는 PostCSS 7 호환성 빌드와 함께 Tailwind CSS를 설치하고 있습니다. Create React App (또는 CRA)는이 기사를 작성할 때 PostCS 8을 지원하지 않기 때문입니다. 버전 2.0 이후 테일 윈드 CSS에 필요한 AutoPrefixer도 설치하고 있습니다. 크라코 설정 일반적으로 CRA를 구성하려면 React-Scripts eject eject 또는 NPM 실행 CRA의 기본 스크립트와 함께 실행해야합니다. 그러나 이것은 CRA에 숨겨진 모든 구성 (웹 팩 구성, 바벨 구성, PostCS 구성 등)에 프로젝트에 숨겨져있는 모든 구성을 방출 할 것이기 때문에 이것은 매우 불편합니다. 더 이상 지원할 수 없습니다 이것은 React App Configuration Override (또는 Craco)가 들어오는 곳입니다. Craco는 CRA에 간단한 구성 레이어를 추가하는 라이브러리입니다. CRA 내부의 모든 구성을 프로젝트에 배출하는 대신 (예 : 웹 팩에 일부 구성을 추가하기 위해서) 모든 새로운 구성 또는 원래 구성에 대한 변경 사항은 새 파일 craco.config.js에 넣습니다. Craco는 번거 로움없이 CRA를 최대한 활용하도록 CRA를 구성 할 수 있습니다. PostCSS 구성을 무시하고 TailWindcss 플러그인을 추가하려면 Craco가 필요합니다. 따라서 먼저 설치하겠습니다 :

CRA를 사용할 때는 package.json의 스크립트가 다음과 같습니다.

기본적으로 CRA로 할 수없는 일을하기 위해 Craco를 사용하므로 프로젝트를 구축하거나 개발 중에 실행하기 위해 Craco를 사용하기 위해 스크립트를 변경해야합니다.

우리는 스크립트를 시작, 빌드 및 테스트 할 때 반응 스크립트를 Craco로 교체했습니다. 우리는 방출 스크립트를 변경하지 않았습니다.

다음, 프로젝트의 루트에서 Craco 구성 파일 Craco.config.js를 만듭니다 :

이 구성 파일은 TailWindcss 및 AutoPrefixer 플러그인을 Postcss에 추가합니다. 이제 Tailwind CSS : 에 대한 구성 파일을 생성합니다

참고 : Node.js v14를 사용하는 경우이 명령을 실행 중에 발생하는 오류에 대한보고 된 문제가 있습니다. node.js v15로 업데이트되면 작동하지만 그렇게 할 수 없다면 여기서 해결 방법 중 하나를 따르십시오. 이것은 프로젝트의 루트에서 Tailwind.config.js 파일을 만듭니다. 다음 내용이 있습니다

각 구성 키가 의미하는 바는 다음과 같습니다

퍼지 : 이것은 테일 윈드 CSS를 스캔하고 어떤 테일 윈드 CSS 클래스를 사용하고 있는지 확인하여 사용하지 않는 모든 스타일과 생산에서 클래스를 제거 할 수 있도록 파일을 지정하는 데 사용됩니다. <:> DarkMode : 프로젝트에서 Dark Mode의 동작을 지정합니다. 값은 미디어 일 수 있습니다. 즉, Dark Mode 스타일링은 Dark Mode Media 쿼리를 기반으로 적용되며 사용자 OS의 기본 모드에 따라 다릅니다. 클래스 일 수도 있습니다. 즉, HTML 문서의 상위 요소에 Dark Class가있을 때 Dark Mode 스타일이 적용됩니다. 테마 : 테마, 글꼴, 중단 점 등의 색상 팔레트를 수정하는 데 사용할 수 있습니다. 튜토리얼 후반에 테마를 변경하는 방법을 살펴 보겠습니다.
1. <:> 변형 :이를 통해 Tailwind CSS의 핵심 플러그인에 추가 변형을 적용 할 수 있습니다. 나중에 튜토리얼에서 어떻게 작동하는지 볼 것입니다.
플러그인 : 추가 유틸리티 클래스, 사용자 정의 변형, 기본 스타일 이상을 추가 할 수있는 플러그인을 추가 할 섹션.
2. 지금은 두 가지만 변경하겠습니다. 먼저 퍼지 키 : 를 변경합니다
이것은 Tailwind CSS에게 SRC 디렉토리의 모든 JS, JSX, TS 및 TSX 파일을 살펴보고 Public/Index.html 파일을 통해 Tailwind CSS에서 사용될 클래스를 파악하고 사용하지 않은 클래스를 제거합니다. <.> 두 번째 변화는 다크 모드에 대한 것입니다 :
3. 이 튜토리얼의 단순성을 위해 사용자의 OS 선호도를 기준으로 Dark Mode를 유지합니다. Tailwind CSS로 React 프로젝트를 설정하는 마지막 단계는 Src/Index.css에 Tailwind CSS 스타일을 포함시키는 것입니다. 이 파일의 내용을 다음으로 바꾸십시오
@tailwind 지시문은 기본적으로 스타일을 index.css로 가져옵니다. 기본적으로 CRA는 src/index.css를 src/index.js로 가져옵니다
4. 이것은 Tailwind CSS 스타일이 React 프로젝트에 적용될 것이며 아름다운 웹 사이트 구축을 시작할 준비가되었음을 의미합니다!
테일 윈드 CSS 유틸리티 및 변형 이해 코딩에 들어가기 전에 Tailwind CSS 유틸리티 클래스와 변형이 무엇인지 이해해 봅시다. Tailwind CSS는 스타일 구성 요소를보다 쉽게 ​​만들 수 있도록 설계되었으며 재사용 가능한 구성 요소를 만드는 데 집중할 수 있도록 설계되었습니다. 유틸리티 클래스는 CSS를 쓰지 않고 생각할 수있는 어떤 방식 으로든 구성 요소를 스타일링 할 수있는 광범위한 클래스입니다. 예를 들어, 테두리의
요소를 스타일링하고, 글꼴 크기를 변경하고, 배경 및 텍스트 색상을 변경하려면 CSS와 같은 것을 작성해야합니다. Tailwind CSS를 사용하면 유틸리티 클래스를 사용하면 다음을 수행 할 수 있습니다. 이 예에서 각 클래스가 의미하는 바는 다음과 같습니다

테두리 : 테두리 너비를 1px
1. 로 설정합니다 Border-Red-100 : 테마를 기준으로 경계 색상을 적색 음영으로 설정합니다 (테마에 따라) <:> text-lg : 글꼴 크기 1.125rem 및 라인 높이 1.75rem 를 제공합니다 bg-red-400 : 배경색을 빨간색 음영으로 설정합니다 (테마를 기준으로)
2. <:> 텍스트-백색 : 텍스트 색상을 흰색으로 설정합니다
3. 여러 가지 다른 클래스가 있으며 다양한 색상의 색상도있어 테마가 더 쉬워집니다. 유틸리티 클래스를 사용하면 실제로 CSS를 작성할 필요가 거의 없습니다. 좋아요,하지만 미디어 쿼리는 어떻습니까? Psuedo 수업은 어떻습니까? 다크 모드는 어떻습니까? CSS를 직접 쓰지 않고도 할 수 있습니까?
는 변형이 들어올 때입니다. 변형은 장치 중단 점, 요소 상태 또는 다크 모드가 활성화되어 있는지 여부를 기반으로 요소에 스타일을 추가 할 수 있습니다. 따라서, 이전에는 장치의 크기에 따라 요소의 너비를 변경하기 위해이 작업을 수행했을 수도 있습니다.
4. Tailwind CSS를 사용하면 간단히 수행 할 수 있습니다.
이것은 min-width : 1025px가 현재 화면 너비에 적용될 때 W-1/2 클래스 (너비 : 50%)를 적용하면 최소의 W-3/4 클래스 (너비 : 80%)를 적용합니다. -width : 768px는 현재 화면 너비에 적용되며 다른 변형이 더 이상 적용되지 않으면 W- 가루 클래스 (너비 : 100%;)를 적용합니다. 이것은 확실히 모든 프로젝트에서해야 할 지루한 작업을 더 쉽고 빠르게 만듭니다. 처음에는 혼란스러워 보일지 모르지만, 더 많이 시작하면 유틸리티 클래스와 변형을 사용하는 것이 두 번째 자연이되는 방법을 알게 될 것입니다. 프로젝트의 공식 문서에서 테일 윈드 구성에 대한 자세한 내용을 읽을 수 있습니다. 우리의 구성 요소 구현 웹 사이트로 돌아갑니다. 우리는 깔끔한 디자인으로 제품을 표시 할 간단한 웹 사이트를 만들고 있습니다. 간단하게하기 위해 Fake Store API의 가짜 데이터를 사용합니다. 실제로 API에 대한 요청을 수행하는 대신 샘플 JSON 응답을 사용하여 프로젝트의 JSON 파일에 배치합니다. 다시, 이것은 튜토리얼의 단순성을위한 것입니다.
5. 제품 엔드 포인트로 이동하여 응답을 복사하십시오. 그런 다음 파일 src/data/products.json 파일을 만들고 응답을 붙여 넣습니다. 이와 유사한 객체 배열이어야합니다.
제품 구성 요소 구현부터 시작하겠습니다. 이 구성 요소는 제품에 대한 정보를 보여주는 카드 구성 요소입니다. 다음 내용으로 SRC/Components/Product.js를 만듭니다

알 수 있듯이 제품 구성 요소는 제품 세부 사항 만 표시합니다. 우리는 현재 스타일링을위한 수업을 추가하지 않았습니다.

다음으로 Src/App.js로 이동하여 컨텐츠를 다음으로 변경하십시오.

<span>node -v
</span>

여기에서는 Products.json 파일을 제품으로 가져오고 있습니다. 그런 다음 이전에 만든 제품 구성 요소를 사용하여 제품을 반복하고 각 제품을 표시합니다. 다시 한 번 스타일링을위한 클래스를 추가하지 않았다 지금 서버를 시작합시다. 다음 명령을 실행하십시오 :

당신은 텍스트가 많지만 스타일이 없다는 것을 알 수 있습니다.

배경 색상 추가 스타일을 추가하기 시작하겠습니다. 먼저 페이지의 배경색을 변경합니다. 이를 위해 Tailwind의 배경색 수업을 사용합니다. 배경색 클래스는 형식 BG- {color}-{numericsCale} 형식이며, 여기서 NumericsCale은 선택 사항입니다. 기본적으로 색상은 흰색, 검은 색, 회색, 빨간색, 파란색, 녹색, 노란색, 주황색, 인디고, 보라색 및 분홍색 일 수 있습니다. 숫자 스케일은 색상의 음영을 정의하며, 여기서 50은 가장 가벼운 그늘이고 900은 가장 어두운 색조입니다. 예를 들어, 배경색이 밝은 빨간색이 되려면 BG-RED-200을 사용할 수 있습니다. 웹 사이트에서는 배경색을 밝은 회색으로 설정하므로 Src/App.js의 가장 외부

요소에 클래스 BG-Gray-200을 추가합니다. 지금 웹 사이트를 확인하면 (서버가 여전히 실행되지 않으면 다시 실행 해야하는 경우) 배경이 밝은 회색 음영으로 변경되었음을 알 수 있습니다.

<span>npm -v
</span>

컨텐츠 너비 변경 다음으로 우리가해야 할 일은 화면 너비가 768px 이상인 경우 화면의 실제 너비의 50%로 내용의 너비를 변경하는 것입니다. 그러나 작은 장치에서는 전체 너비를 유지하는 것입니다. 우리는 Tailwind의 너비 클래스를 활용할 것입니다. 너비 클래스는 형식 w- {size}이며, 크기는 0에서 96 사이의 범위 일 수 있으며, 이는 rem의 값을 나타냅니다. 1/2 또는 3/5와 같은 비율 또는 백분율을 나타내는 다른 비율; 또는 자동 너비에 대한 자동 또는 폭에 대한 가득한 키워드.

화면 크기를 기반으로 너비를 지정하려면 SM, MD, LG 등과 같은 변형을 사용합니다.이 변형은 규칙을 적용하는 데 필요한 최소 화면 크기를 지정합니다. 우리의 경우, 폭이 768px 이상인 화면의 폭이 50%가되기를 원하기 때문에 W-1/2 :

와 함께 MD 변형을 사용합니다.

<span>node -v
</span>

너비는 이제 화면 너비의 절반으로 변경됩니다. 그러나 수평으로 IT를 중심으로하는 것이 훨씬 좋습니다. 이를 위해 Tailwind의 마진 유틸리티 클래스를 사용합니다. 여백 클래스는 m {side}-{value} 형식이며, 여기서 측면은 선택 사항이며 상단의 경우 t와 같은 요소의 각 측면, 하단의 경우 b, 오른쪽의 경우 l 및 r은 r 또는 구체적입니다. y를 사용하거나 수평으로 x를 사용하여 수평으로 사용합니다. 값은 0에서 96 사이의 범위 일 수 있으며, 단지 1px 또는 자동으로 px 일 수 있습니다. 뿐만 아니라 클래스의 시작 부분에 추가하여 음수 마진을 추가 할 수도 있습니다. 예를 들어, -m -2.

우리는 요소를 가로로 중심하고 있기 때문에 mx-auto를 사용합니다 :

그리고 당신은 그것이 중앙에있는 것을 볼 수 있습니다.

제품 구성 요소 스타일 이제 제품 구성 요소로 넘어 갑시다. 제품 카드에 대한 배경색도 추가하겠습니다. 우리는 그것을 흰색으로 만들어 BG- 백색을 사용할 것입니다. 또한 W-Full을 사용할 수 있도록 전체 너비를 만들 것입니다. 제품 카드를 서로 분리하려면 MB-5를 사용하여 요소에 마진 하단을 추가합니다.

<span>npm -v
</span>

그리고 웹 사이트에서 변경 사항을 볼 수 있습니다 :

제품 구성 요소에서 볼 수 있듯이 가장 바깥 요소 내에는 두 개의 요소가 있습니다. 하나는 제품의 배경 이미지가 있고 다른 하나는 정보가 있습니다. 우리는 서로 옆에 표시하고 싶습니다. 우리가해야 할 첫 번째 일은 가장 바깥 쪽

의 디스플레이를 플렉스로 변경하는 것입니다. 이를 위해 Tailwind의 디스플레이 클래스를 사용합니다. 우리가 언급 한 이전 클래스와 달리 디스플레이 클래스에는 형식이 없습니다. 그들은 우리가 원하는 디스플레이의 이름 일뿐입니다. 따라서 요소 디스플레이 속성을 Flex로 변경하려면 Flex 클래스를 추가합니다.

다음, 우리는 이전과 같이 너비 클래스를 사용하여

요소의 너비를 변경합니다. 지금 웹 사이트를 확인하면 이미지와 텍스트가 서로 옆에 있음을 알 수 있습니다.

약간의 간격 추가 아직 고칠 것이 많습니다. 먼저 제품 정보 컨테이너에 패딩을 추가하겠습니다. 이를 위해 Tailwind의 패딩 클래스를 사용합니다. 패딩 클래스는 m 대신 p를 사용하는 것을 제외하고는 이전에 확인한 마진 클래스와 정확히 비슷합니다. 따라서 제품 정보 컨테이너에 P-5를 추가합니다. MT-4를 사용하여 설명 컨테이너에 약간의 여백을 추가합니다.

우리는 또한 SRC/App.js의 전체 컨테이너에 상단 및 하단 여백을 추가하여 첫 번째 및 마지막 제품이 양쪽의 페이지 가장자리에 있지 않도록합니다. 이를 위해 Py-4 클래스를 추가합니다

<span>node -v
</span>

우리는 이제 웹 사이트가 더 좋아 보이기 시작하는 것을 보게 될 것입니다.

구성 요소의 타이포그래피 개선 이제 타이포그래피에 대해 조금 노력해 봅시다. 제품 정보가 모두 동일하게 보입니다. 우리는 설명과 같은 범주와 제목을 구별 할 수 없습니다. 먼저 일부 텍스트의 색상을 변경해 봅시다. 이를 위해 Tailwind의 텍스트 색상 클래스를 사용합니다. 이 클래스의 형식은 배경색 클래스와 유사하지만 b를 텍스트로 바꾸십시오. 예를 들어, 텍스트의 색상을 녹색으로 만들려면 클래스 텍스트 -Green-100을 추가합니다. 따라서 카테고리의 텍스트 색상을 텍스트 그레이 -400으로 변경하여 다른 텍스트와 비교하여 약간 사라지고 가격 텍스트 색상을 텍스트 -Red-500으로 변경하여 눈에 띄게합시다. 또한 가격에 가장 큰 마진을 추가하여 가장 눈에 띄는 지 확인할 것입니다.

지금 웹 사이트로 이동하면 다른 부분을 구별하는 측면에서 텍스트가 조금 더 명확 해 보일 것입니다.

다음, 글꼴 크기를 변경합시다. 이를 위해 Tailwind의 글꼴 크기 클래스를 사용합니다. 이 클래스의 형식은 텍스트-{size}입니다. 여기서 크기는 SM에서 9xl까지입니다. MD 변형을 사용하여 최소 768px, 작은 화면의 텍스트 -XL을 갖는 스크린에 클래스 텍스트 -4XL을 추가하여 가격의 글꼴 크기를 더 크게 만들어 줄 것입니다. 너비가 768px 이상인 화면에 클래스 텍스트 -2xl을 추가하여 더 큽니다.

텍스트는 이제 훨씬 좋아 보인다.

제품 이미지 위치 <span>npm -v </span> 다음, 이미지를 수정하여 배경 이미지를 완전히 나타나고 배경 이미지를 올바르게 배치하겠습니다.

먼저 배경 이미지 크기를 변경합니다. 이를 위해 Tailwind의 배경 크기 클래스를 사용합니다. 이 클래스의 형식은 bg- {size}이며, 여기서 크기는 자동, 포함 또는 덮개 일 수 있습니다. 우리의 경우 전체 이미지가 보이는지 확인하는 것은 BG-Contain이 될 것입니다.

둘째, 이미지가 여러 번 반복되지 않도록 배경 반복 속성을 변경합니다. 이를 위해 Tailwind의 배경 반복 클래스를 사용합니다. 이 클래스의 형식은 bg- {reporevalue}이며, 여기서 반복 value는 배경 반복 속성에 제공하는 값 또는 라운드 값에 대해 BG- 반복 라운드 및 공간 값에 대한 BG- 반복 공간에 대해 BG 리피트 라운드를 제공합니다. 우리의 경우, 우리는 bg-no-Repeat를 사용합니다 셋째, 이미지가 항상 중앙에 있도록 배경 위치 속성을 변경합니다. 이를 위해 Tailwind의 배경 위치 클래스를 사용합니다. 이 클래스의 형식은 bg- {position}이며, 여기서 위치는 배경 위치 속성에 제공하는 값입니다. 클래스 BG-Center : 를 추가 할 예정입니다

이제 이미지를 완전히 볼 수 있습니다.

<span>node -v
</span>

일부 이미지가 컨테이너 가장자리에 닿는다는 것을 알 수 있습니다. 이 문제를 해결하기 위해 배경 이미지 요소에 래퍼

요소를 추가하고 패딩을 추가합니다.

이전에 배경 이미지에 래퍼 요소로 제공 한 너비를 옮겼으며 배경 이미지 요소에 W-oupl 및 H-Full을 추가하여 부모의 너비의 100%를 차지하는지 확인했습니다. 그리고 높이.

상자 그림자와 둥근 모서리 추가 우리의 제품은 이제 훨씬 더 좋아 보입니다. 현재 스타일에 두 가지 마지막 터치를 추가 할 것입니다. 먼저 각 제품에 그림자를 추가합니다. 우리는 Tailwind의 Box Shadow 클래스를 사용합니다. 이 클래스의 형식은 Shadow- {size}이며, 여기서 크기는 선택 사항이며 SM에서 2XL까지 다양합니다. 그림자를 내부를 만들기 위해 상자 그림자 나 내부를 제거하는 것도 없을 수도 있습니다. 둘째, 우리는 제품 카드의 테두리를 조금 둥글게 만들 것입니다. 우리는 Tailwind의 Border Radius 클래스를 사용합니다. 이 클래스의 형식은 반올림-{position}-{size}이며, 여기서 크기는 선택 사항이며 SM에서 3XL에서 3xL에서 3xL에 이르지 않거나 완전히 둥글게 만들 수 있습니다. 위치는 또한 선택 사항이며 왼쪽의 T 상단 또는 L과 같은 특정 위치가 될 수 있거나 왼쪽 상단의 경우 TL과 같은 특정 모서리에 구체적 일 수 있습니다. . 우리는 제품 카드에 Shadow-SM을 추가하여 작은 그림자를 추가하고 테두리를 둥글게 만들기 위해 둥글게합니다. 마지막으로, 우리의 제품 목록 페이지는 아래의 스크린 샷처럼 보입니다.

<span>npm -v
</span>

테마 커스터마이어 지금까지 우리가 한 모든 스타일은 Tailwind의 기본 스타일을 기반으로했습니다. 그러나 Tailwind를 사용하면 테마를 사용자 정의 할 수 있습니다. 우리는 색상, 글꼴 가족 등을 변경할 수 있습니다. 이 모든 변경 사항은 Tailwind.config.js. 에서 수행됩니다 색상을 조금 변경해 보겠습니다. 테마의 색상을 변경하는 방법에는 여러 가지가 있습니다. 그렇게하는 한 가지 방법은 자신의 색상을 정의하는 것입니다. 예를 들어, 테마에 새로운 색상을 추가하려면 Tailwind.config.js : 에서 다음을 수행 할 수 있습니다.

ind 이제 기본 색상을 사용하는 것처럼 그 색상을 사용할 수 있습니다. 예를 들어, 배경색을 청록색으로 설정하려면 bg-turquoise를 사용할 수 있습니다.테마 색상을 사용자 정의하는 또 다른 방법은 기본 색상을 변경하는 것입니다. 앞에서 언급했듯이 테일 윈드의 기본 색상은 흰색, 검은 색, 회색, 빨간색, 파란색, 녹색, 노란색, 주황색, 인디고, 보라색 및 분홍색입니다. 이 색상의 실제 값을 변경할 수 있습니다.

예를 들어 노란색을 겨자 노란색으로 바꾸려면 다음을 수행하십시오.

이제 기본 클래스를 노란색으로 사용하면 여기에서 정의한 노란색이 나타납니다. 숫자 스케일을 사용하여 색상의 다른 색조에 대한 값을 지정할 수도 있습니다.

당신은 또한 가장 가벼운, 빛, 기본, 어둡고 어두운 것과 같은 키를 사용할 수 있습니다 : .

색상 팔레트 추가 색상을 변경하는 세 번째 방법은 테일 윈드 CSS에서 다른 색상 팔레트를 사용하는 것입니다. 먼저, Tailwindcss/Colors의 색상이 필요합니다.

<span>node -v
</span>

다음으로, 우리는 로즈 팔레트로 빨간색을 바꾸고 회색에서 파란색으로 바꿀 것입니다.

지금 웹 사이트를 확인하면 사용한 색상이 약간 변경됩니다.

<span>npm -v
</span>

색상의 차이를 잘보고 싶다면 회색을 앰버로 변경하려고 시도 할 수 있습니다.

당신은 배경이 이제 노란색이라는 것을 알 수 있습니다. 당신은 또한 tailwind.config.js에서 글꼴 패밀리를 변경할 수 있으며 Tailwind CSS와 함께 제공되는 동일한 클래스를 사용합니다. 이렇게하면 디자인에 맞게 테마를 쉽게 사용자 정의 할 수 있습니다.

어두운 모드 추가 어두운 변형을 통해 우리는 조명 모드를 위해 스타일링하는 동시에 어두운 모드에 대한 요소를 쉽게 스타일링 할 수 있습니다. 처음에는 웹 사이트를 설정할 때 Tailwind.config.js의 Dark Key를 미디어로 변경했습니다. 즉, 브라우저 나 OS가 다크 모드로 설정되면 어두운 모드가 적용됩니다.

npx create-react-app react-shop

웹 사이트가 다크 모드로 어떻게 보이는지 테스트하려면 Dark Mode로 설정하지 않으면 Chrome Devtools 에서이를 모방 할 수 있습니다. f12

를 눌러 데트 툴을 열고 ctrl

shift

p

(또는 cmd

shift

<span>cd react-shop
</span>

p ) 및 드롭 다운에서 "렌더링 표시"를 입력하고 표시하는 옵션을 선택하십시오. 마지막으로, 아래로 스크롤하여 "CSS 미디어 기능을 Emulate Color-Scheme"로 스크롤하고 Prefers Color-Scheme : Dark를 선택하십시오. 선호하는 컬러 스키 밋 : 라이트를 선택하여 라이트 모드를 테스트하기 위해 동일한 작업을 수행 할 수 있습니다. SRC/APP.JS의 클래스 어두운 클래스 : BG-Gray-800을 추가하여 웹 사이트의 배경색을 어두운 모드로 변경하여 시작하겠습니다. 지금 확인하고 브라우저/OS가 어두운 모드 (또는 에뮬레이션)로 설정된 경우 배경색이 더 어두운 회색 음영으로 변경되었음을 알 수 있습니다.

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

이제 제품 카드를 변경하겠습니다. 클래스 Dark : BG-Gray-300을 가장 바깥 요소에 추가합니다 :

지금 확인하면 제품 카드의 배경색이 변경되었음을 알 수 있지만 흰색 배경을 가지고 있기 때문에 이미지가 좋지 않은 것으로 나타났습니다.

.

<span>node -v
</span>

어두운 모드에있을 때 백그라운드 래퍼에 흰색 배경을 추가하여 더 좋게하겠습니다. 이것은 클래스 어두운 것 : bg-white를 추가하여 수행 할 수 있습니다. 또한 카테고리 텍스트 색상은 이제 거의 보이지 않으므로 클래스 어두운 클래스를 추가하여 어두운 것으로 변경합니다 : 텍스트 그레이 -700 : .

우리 웹 사이트의 최종 모양은 다음과 같습니다.



플러그인의 그룹 및 사용 변형을 활성화합니다 일부 변형은 모든 플러그인에 대해 기본적으로 활성화되지 않으므로 파일 크기가 크기 때문에 큰 변형이됩니다. 따라서 이러한 변형을 사용해야하는 경우 원하는 플러그인의 경우 Tailwind.config.js에서 수동으로 활성화해야합니다. 플러그인은 우리가 모두 사용했던 클래스입니다. 예를 들어, 배경색은 BackgroundColor 플러그인에 속합니다 활성화되지 않은 변형 중 하나는 그룹 호버입니다. 그룹은 함께 그룹화되는 여러 요소이므로 모든 상태 (예 : 호버)가 전체 그룹에 영향을 줄 수 있습니다. 그룹 클래스를 컨테이너에 추가하여 그룹이 선언됩니다. 그런 다음 컨테이너의 자녀 인 요소의 유틸리티 클래스 중 하나와 함께 그룹 호버 변형을 사용할 수 있습니다. Group-Hover를 사용한 유틸리티 클래스는 그룹의 요소 (즉, 컨테이너 요소 내부의 모든 요소)가 호버링되지 않는 한 적용되지 않습니다. 우리는 모든 제품 카드를 그룹으로 만들려고합니다. 그런 다음 호버에서는 이미지를 확대합니다. 따라서 제품 구성 요소의 가장 바깥 요소에 그룹 클래스를 추가 한 다음 배경 이미지가있는 요소에 다음 클래스를 추가합니다.

전환 변환 : 테일 윈드의 전환 클래스 중 하나. 전환 속성을 적용하여 변경 만 변환합니다 기간 -300 : Tailwind의 전환 기간 클래스 중 하나입니다. 값 300ms의 전환 기간을 적용합니다 <:> 그룹 호버 : 변환 : 위에서 설명한대로 그룹 호버 변형은 그룹의 요소가 호버링 될 때만 변환 클래스가 적용되도록합니다. Transform은 Tailwind의 변환 클래스 중 하나입니다. 다른 변환 관련 클래스를 추가 할 수 있습니다 Group-Hover : Scale-125 : Scale-125 클래스는 Tailwind의 스케일 클래스 중 하나입니다. x와 y의 스케일을 1.25로 설정하지만 먼저 변환 클래스를 추가해야합니다.
1. 위의 클래스를 사용하면 제품의 모든 요소가 호버링되면 이미지가 확대됩니다. 또한 제품 구성 요소의 가장 바깥 요소에 클래스 오버 플로우가 숨겨져있어 이미지가 컨테이너 밖에서 자라면 오버플로가되지 않도록합니다. 또한 Hover : Shadow-2XL을 사용하여 전환 쉐이더 300으로 제품 카드의 섀도우를 더 크게 만들어 전환이 원활하지 않도록합니다.
2. 참고 : 어두운 모드를 모방하거나 어두운 모드를 사용하는 경우 라이트 모드에서 효과를 더 잘 볼 수 있으므로 조명 모드로 전환해야합니다.
. 지금 제품 위로 호버링을 시도하면 그림자가 커지고 이미지가 확대되는 것을 볼 수 있습니다.
4. 결론 우리는 CSS를 쓰지 않고 React와 함께 깔끔하고 반응 형 웹 사이트를 만들었습니다! 그것이 Tailwind CSS의 마법입니다. Tailwind CSS는 지루하고 반복적 인 작업 또는 CSS 작성을 제거합니다. 또한 테마 생성을 용이하게하고 세련된 디자인으로 재사용 가능한 구성 요소를 만드는 데 집중할 수 있으며, 이는 반응에 적합합니다. 우리 가이 기사에서 다룬 것은 Tailwind CSS로 쉽게 만들 수있는 모든 아름다운 것들의 표면을 긁는 것입니다. Tailwind와의 반응을 사용하는 FAQ 테일 윈드 CSS 란 무엇이며 왜 React와 함께 사용해야합니까? Tailwind CSS는 스타일링 웹 애플리케이션을위한 사전 정의 된 클래스 세트를 제공하는 유틸리티 우선 CSS 프레임 워크입니다. REACT와 함께 Tailwind CSS를 사용하면 개발 프로세스 속도를 높이고 일관된 설계 시스템을 유지할 수 있습니다.
Tailwind CSS를 React 프로젝트와 어떻게 통합합니까? 당신은 NPM 또는 원사로 설치하고 Tailwind CSS 클래스를 처리하기 위해 빌드 프로세스를 구성하여 Tailwind CSS를 React 프로젝트에 통합 할 수 있습니다.

CRA (React App)를 사용할 수 있습니까? 테일 윈드 CSS? 예, Create React App과 함께 Tailwind CSS를 사용할 수 있습니다. Craco 구성 또는 React-Scripts PostCS 설정을 포함하여 여러 가지 방법이 있습니다. 반응 구성 요소에 Tailwind CSS 클래스를 어떻게 적용합니까? ClassName Props를 사용하여 Tailwind CSS 클래스를 React 구성 요소에 직접 적용 할 수 있습니다. 예를 들어,

hello, tailwind! 유틸리티 클래스를 사용하면 React 구성 요소를보다 간결하게 만들 수 있으며 일관된 설계 시스템을 홍보 할 수 있습니다. 또한 반응 형 디자인을 단순화하고 재사용 성을 장려합니다.

RECT 구성 요소와 함께 Tailwind CSS에서 반응 형 클래스를 어떻게 사용할 수 있습니까? 테일 윈드 CSS는 다양한 화면 크기에 대해 다른 스타일을 정의 할 수있는 반응 형 클래스를 제공합니다. MD : 클래스 정의에 MD와 같은 중단 점을 추가하여 이러한 클래스를 사용할 수 있습니다.

REACT와 함께 Tailwind CSS를 사용하는 데 필요한 제한이나 단점이 있습니까? 테일 윈드 CSS는 강력하지만 클래스 사용에주의를 기울이지 않으면 파일 크기가 커질 수 있습니다. 전통적인 CSS와 함께 일하는 것을 선호하는 디자이너들에게는 도전적 일 수 있습니다.

위 내용은 React 및 Tailwind CSS가있는 웹 사이트를 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!