React에서 TailwindCSS v3.0 시작하기
TailwindCSS를 사용해야 하는 이유
Utility-First CSS 프레임워크에 대해 원하는 것이 무엇이든 말하세요. 전통적인 CSS는 각 구성 요소에 특정 선택기를 제공하여 코드 중복을 초래하는 "모놀리식"작성을 위해 설계되었습니다. 구성 요소를 분할하고 추상화하는 현재 공간에서는 다소 구식인 것 같습니다. BEM과 같은 기술은 이러한 피해 중 일부를 완화하기 위해 발명되었습니다.
TailwindCSS는 발생할 수 있는 거의 모든 스타일링 사용 사례를 처리하기 위해 CSS 클래스를 자동으로 생성하는 최고의 유틸리티 우선 CSS 프레임워크 중 하나입니다. 기본 스케일을 기반으로 하는 내장 디자인 시스템을 통해 모든 간격, 여백 및 패딩이 일관되고 아름답습니다. 몇 시간 동안 계속할 수 있지만 TailwindCSS를 사용하는 방법에 대해 알아보겠습니다.
반응 앱 만들기
아래 명령을 실행하여 새 React 앱을 시작합니다.
npx create-react-app tailwindcss-app
TailwindCSS 설치
TailwindCSS는 다음 npm 패키지에 의존합니다.
TailwindCSS - TailwindCSS 프레임워크
PostCSS - JavaScript 기반 CSS 변환 도구
Autoprefixer - 공급업체 접두사를 자동으로 추가하는 CSS 구문 분석기
세 가지 모두 다음 명령으로 설치할 수 있습니다.
npm install -D tailwindcss postcss autoprefixer
TailwindCSS 구성 만들기
TailwindCSS 및 PostCSS에 대한 구성은 아래 명령으로 생성해야 합니다.
npx tailwindcss init -p
이렇게 하면
tailwind.config.js
및 postcss.config.js
두 파일이 생성됩니다.다음으로 코드 소스를
tailwind.config.js
구성에 추가합니다.module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}", // Add code source
],
theme: {
extend: {},
},
plugins: [],
}
tailwind.config.js
는 기존 스타일을 정의custom styles하거나 확장하는 데에도 유용합니다.TailwindCSS 지시문 가져오기
TailwindCSS 스타일을 프로젝트로 가져와야 합니다. 대부분의 기본 React 프로젝트에는 전체 프로젝트에 적용되는
index.css
스타일이 포함되어 있습니다.src /
| - App.js
| - App.css
| - index.css
...
한 번만 가져와야 하므로 여기에서 TailwindCSS를 가져옵니다.
@tailwind base;
@tailwind components;
@tailwind utilities;
일부 TailwindCSS 코드 실행
일부 코드와 TailwindCSS 스타일을
App.js
에 추가해 보겠습니다.function App() {
return (
<section className="px-4 py-24 mx-auto max-w-7xl">
<div className="grid items-center w-full grid-cols-1 gap-0 mx-auto lg:grid-cols-11 lg:gap-24 xl:w-11/12">
<div className="col-auto text-center md:col-span-7 lg:text-left">
<h1 className="mb-4 text-3xl font-bold leading-tight text-gray-900 md:text-4xl md:leading-none tracking-none md:tracking-tight">Ready
to start your TailwindCSS jurney?</h1>
<p className="mb-10 text-lg font-light text-gray-500 md:text-xl md:tracking-relaxed md:mb-4">
Your move!
Yu-Gi-Oh!
Your move!
Yu-Gi-Oh!
It's time to du-du-du-du-dududududududuel!
Yu-Gi-Oh! (-Oh! -Oh! -Oh!)
Your move!
Yu-Gi-Oh is king of games!
It's time to du-du-du-du-dududududududuel!
Yu-Gi-Oh!
</p>
</div>
<div className="col-auto md:col-span-4">
<form className="mb-6 border-0 rounded-lg shadow-xl">
<div className="cursor-pointer px-6 py-4 text-center bg-blue-500 text-white font-bold rounded">
Get started
</div>
</form>
</div>
</div>
</section>
);
}
export default App;
이제 아래 명령으로 React 앱을 시작하십시오.
npm run start
아래에서 비슷한 것을 볼 수 있습니다.
결론
TailwindCSS 프로젝트를 시작할 준비가 되었기를 바랍니다. 읽어 주셔서 감사합니다!
Twitter 또는 내 블로그gregorygaines.com에서 나를 팔로우하세요.
Reference
이 문제에 관하여(React에서 TailwindCSS v3.0 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gregorygaines/getting-started-with-tailwindcss-v30-in-react-ndp텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)