React에서 tailwindcss를 사용하고 싶어요!
9323 단어 Reacttailwindcss
이 문장에 관하여
현재 화제가 되고 있는 CSS 프레임워크를 React에서 사용하기 위한'Tailwindcss'의 요약입니다.
말하자면 Tailwind.
CSS 프레임워크 중 하나입니다.
아래의 Gif를 보면 이해하기 쉽지만 요소에 class를 지정해서 스타일을 적용할 수 있습니다.
https://tailwindcss.com/
개발 환경
설치 지침
패키지 설치
대상 항목의 패키지입니다.json이 있는 폴더에서 다음 명령을 실행합니다.
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
npm install postcss-cli autoprefixer --save-dev
or
yarn add postcss-cli autoprefixer --save-dev
styles.css 제작
tailwindcss의 다양한 내용을 가져왔습니다.css 파일을 만듭니다.
styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
package.json에서 구축 스크립트 만들기 및 실행
package.json
"scripts": {
"start": "react-scripts start",
"build:tailwind":"tailwind build src/styles.css -o src/tailwind.css",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
npm run-script build:tailwind
그러면 테일윈드.css를 만듭니다.build의tailwind.임의의 파일에서 css 가져오기
index.js
import './tailwind.css';
동작 확인
모든 구성 요소에 다음 코드를 붙여넣고 스타일이 성공적으로 적용되었는지 확인하십시오.
App.js
import React from "react";
function App() {
return (
<div className="App">
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img
class="w-full"
src="https://source.unsplash.com/random/1600x900/"
alt="Sunset in the mountains"
></img>
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus quia, nulla! Maiores et perferendis eaque,
exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
#photography
</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">
#travel
</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">
#winter
</span>
</div>
</div>
</div>
);
}
export default App;
이렇게 되면 성공이야.(이미지는 random으로 unsplashAPI에서 가져온 것이기 때문에 바뀌어야 합니다.)
마지막
bootstrap은 아무것도 원하지 않아도 적당히 반을 추가하면 좋은 스타일이 나온다. 이에 비해 tailwindcss는 CSS를 잘 이해하고 반을 추가하지 않으면 좋은 느낌이 든다.
나는 테일윈드 css 자체가 좀 더 공부해야 한다고 생각한다.
또한 상세한taiwindcss의 사용 방법은 보도에서 정리되었다.
참고문
https://blog.logrocket.com/create-react-app-and-tailwindcss/
https://qiita.com/zzzzz/items/68461080515ec1012980
Reference
이 문제에 관하여(React에서 tailwindcss를 사용하고 싶어요!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Annoske/items/1087a1205d3783ea3d94텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)