순풍
Tailwind-CSS란?
기본적으로 tailwind CSS는 사용자 지정 사용자 인터페이스를 빠르게 구축하기 위한 유틸리티 우선 CSS 프레임워크입니다. 고도로 사용자 정의 가능한 CSS 프레임워크입니다. flex, 패딩용 p, 여백용 m, 텍스트 중심에서 중앙 집중식 텍스트로, 회전, bg-color 등과 같은 클래스로 패킹하는 프레임워크로, 프로젝트에서 직접 모든 디자인을 빌드하도록 구성할 수 있습니다. 유연성으로 인해 매일 가장 인구가 많은 CSS 프레임워크가 되고 있습니다.
Tailwind CSS의 이점
내 경험에 따르면 Tailwind CSS는 사용자 정의가 가능한 프레임워크입니다. 디자인을 만드는 것은 매우 유연합니다. 가장 빠르고 쉬운 방법으로 웹 사이트를 만드는 데 사용할 수 있습니다. CSS 클래스와 ID에 대한 어리석은 이름은 더 이상 없습니다. 구성 요소를 만들기 위해 디자인을 사용자 정의할 수 있습니다. 또한 여기에서 웹 사이트를 반응형으로 만드는 것이 더 쉽습니다. PurgeCSS를 사용하여 최적화할 수도 있습니다.
이미지: Tailwind CSS의 이점이러한 기능을 기반으로 Tailwind는 장기적으로 생성 및 디자인 프로세스의 속도를 높이고자 하는 CSS에 익숙한 개발자에게 탁월한 솔루션이라고 쉽게 말할 수 있습니다. 그러나 바닐라 CSS에 익숙하지 않고 새로운 CSS 프레임워크를 배우는 데 시간을 보내고 싶지 않다면 좋은 생각이 아닙니다.
부트스트랩과 비교
Bootstrap은 반응형 웹 사이트를 구축하기 위한 가장 인기 있는 HTML, CSS 및 JavaScript 프레임워크입니다. 반면 Tailwind CSS는 빠른 UI 개발을 위한 가장 인기 있는 유틸리티 우선 CSS 프레임워크입니다.
디자인 작업을 하는 사람이 있다면 대부분의 CSS를 직접 작성하기 때문에 부트스트랩과 같은 프레임워크는 그다지 도움이 되지 않습니다. Tailwind를 사용하면 유틸리티 클래스로 인해 더 쉬워집니다.
Tailwind는 UI 키트가 아니기 때문에 Bootstrap과 같은 프레임워크와 다릅니다. 기본 테마가 없으며 기본 제공 UI 구성 요소가 없습니다.
Tailwind CSS 사용
tailwind css를 사용하려면 두 가지 방법을 적용할 수 있습니다.__
첫 번째 방법:- npm을 통해 tailwind css 설치,
1단계:- 설치:
npm install -D tailwindcss2단계:- 템플릿 경로 구성 __tailwind.config.jsmodule.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}3단계:-설치:-
npx tailwindcss init4단계:- Tailwind 지시문을 CSS__src/input.css에 추가합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;5단계:- Tailwind CLI 빌드 process_command 시작
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch두 번째 방법:-CDN을 통해 Tailwind CSS 사용,
링크:-
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">html 파일에 CDN이 포함된 코드
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<body>
<div class="container mx-auto">
<div class="leading-9
text-red-700
bg-red-500 w-full p-5 my-10
border-t-2
border-solid
border-green-500
opacity-40
shadow-2xl">
<h2 class='text-2xl font-bold text-center text-pink-800 uppercase py-2'>Our Top New Brands</h2>
</div>
<div class='container mx-auto py-5'>
<div class='grid lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 text-black gap-4'>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo1.png" class='w-full'
alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo2.png" class='w-full'
alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo3.png" class='w-full'
alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo4.png" class='w-full'
alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo5.png"
class='w-full p-2' alt='' />
</div>
<div class='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo6.png"
class='w-full p-2' alt='' />
</div>
</div>
</div>
</body>
</html>
react javascript 라이브러리(Brands.js) 파일에서 npm을 사용한 코드;
import React from 'react';
const Brands = () => {
return (
<div className='container mx-auto py-5'>
<h2 className='text-2xl font-bold justify-center text-pink-800 uppercase pb-6'>Our Top New Brands</h2>
<div className='grid lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 text-black gap-4'>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo1.png" className='w-full' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo2.png" className='w-full' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo3.png" className='w-full' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo4.png" className='w-full' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo5.png" className='w-full p-2' alt='' />
</div>
<div className='p-2 transition hover:-translate-y-2 hover:scale-110 hover:shadow duration-300'>
<img src="https://template.annimexweb.com/diva/assets/images/logo/brandlogo6.png" className='w-full p-2' alt='' />
</div>
</div>
</div>
);
};
export default Brands;
이것이 Tailwind CSS에 대한 짧은 설명 안에 있는 모든 것입니다. 독자들에게 조금이나마 도움이 되었으면 합니다.
Reference
이 문제에 관하여(순풍), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/karimaaktari119/tailwind-4k3c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
