당신은 텍스트가 많지만 스타일이 없다는 것을 알 수 있습니다.
배경 색상 추가
스타일을 추가하기 시작하겠습니다. 먼저 페이지의 배경색을 변경합니다. 이를 위해 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 클래스를 추가합니다.
다음, 우리는 이전과 같이 너비 클래스를 사용하여 요소의 너비를 변경합니다.
지금 웹 사이트를 확인하면 이미지와 텍스트가 서로 옆에 있음을 알 수 있습니다.
우리는 또한 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로 설정하지만 먼저 변환 클래스를 추가해야합니다.
-
위의 클래스를 사용하면 제품의 모든 요소가 호버링되면 이미지가 확대됩니다. 또한 제품 구성 요소의 가장 바깥 요소에 클래스 오버 플로우가 숨겨져있어 이미지가 컨테이너 밖에서 자라면 오버플로가되지 않도록합니다. 또한 Hover : Shadow-2XL을 사용하여 전환 쉐이더 300으로 제품 카드의 섀도우를 더 크게 만들어 전환이 원활하지 않도록합니다.
- 참고 : 어두운 모드를 모방하거나 어두운 모드를 사용하는 경우 라이트 모드에서 효과를 더 잘 볼 수 있으므로 조명 모드로 전환해야합니다.
.
지금 제품 위로 호버링을 시도하면 그림자가 커지고 이미지가 확대되는 것을 볼 수 있습니다.
-
- 결론
우리는 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를 사용하여 제품 웹 사이트를 만드는 방법을 보여줍니다. CRACO (Create React App Configuration Override)를 사용하여 Tailwind CSS로 React를 설정하는 방법을 다룰 것입니다. Tailwind의 CSS 유틸리티 클래스 및 변형 및 사용 방법; 웹 사이트를 쉽게 Dark Mode를 호환하는 방법; 어떤 그룹이; 그리고 변형을 활성화하는 방법.