1. TailwindCSS
- 외부 라이브러리를 통해 보다 쉽고 빠르게 컴포넌트들을 디자인 하는 방법
- 미리 정해진 스타일의 클래스명을 통해 빠르게 디자인이 가능하다.
- 아래 사이트에 들어가면 다양한 스타일에 관한 클래스의 정보가 들어있다.
- 아래 사이트에서 기능들을 확인할 수 있기에 여기서 기능은 따로 설명하지 않겠다.
2. TailwindCSS를 사용하기 위한 준비
- 관련 패키지 설치
- VS code에서 사용하기 위해서는 관련 패키지를 설치해야 한다.
- tailwindcss, postcss, autoprefixer 이 세가지를 설치 해야함
npm install -D tailwindcss postcss autoprefixer
- tailwind.config.js 파일 생성
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
- content 안에 index.css 파일의 위치 정보와 CSS를 사용할 파일을 지정한다. - index.css 내용 추가
- 아까 content 안에 적었던 css 파일에 tailwind를 불러오기 위한 코드를 입력한다.
@tailwind base;
@tailwind components;
@tailwind utilities; - 편의성을 위해 tailwindCSS 관련 확장팩 설치
Tailwind CSS IntelliSense : 미리보기, 자동완성, 린팅등 지원
Tailwind Docs
3. 용이한 Customizing
- 원하는 색상이나 기능들이 없는 경우에도, 쉽게 커스터마이징을 하여 원하는 클래스를 만들 수 있다.
- tailwind.config.js 에서 아래와 같이 커스터마이징하고 싶은 나만의 class를 만들 수 있다.
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
colors: {
primary: "#FF6363",
secondary: {
100: "#E2E2D5",
200: "#888883",
},
},
fontFamily: {
body: ["Montserrat"],
},
},
},
plugins: [],
};
/* 글씨 색을 #FF6363으로 폰트를 "Montserrat" */
<p className="text-primary font-body">안녕하세요</p>
4. 예시
export default function About(props) {
return (
<div>
{/* <Button /> */}
{/* []는 우리가 강제로 값을 줄려고 할 때 사용 */}
<h3 className='text-5xl font-bold mt-20 text-center'>회사소개</h3>
<div className='mt-20 flex h-[500px]'>
<div className='text-left w-1/2 text-2xl leading-[50px] pt-10'>
<h3 className='text-4xl mb-6 font-bold'>Story</h3>
<span>
2022년, 우리는 시장에서 사라질 뻔 했습니다. 그러나,
<span className='text-yellow-400 px-3'>위기를 기회로</span>
바꾸는 도전 정신이 지금의 튼튼한 기업을 만들었습니다.
</span>
</div>
<div className='w-1/2 inline-block pl-4 pt-24 border-l border-stone-500'>
<ul className='text-xl'>
<li className='mt-2 pb-6 border-b border-stone-600'>
<span className='text-4xl mr-10'>2022</span>
<span className='text-lg'>파이낸셜 타임즈 선정</span>
</li>
<li className='mt-2 pb-6 border-b border-stone-600'>
<span className='text-4xl mr-10'>2021</span>
<span className='text-lg'>알토스벤쳐스 단독 투자 유치</span>
</li>
<li className='mt-2 pb-6 border-b border-stone-600'>
<span className='text-4xl mr-10'>2020</span>
<span className='text-lg'>대만 서비스 런칭</span>
</li>
<li className='mt-2 pb-6 border-b border-stone-600'>
<span className='text-4xl mr-10'>2019</span>
<span className='text-lg'>사이트 10만개 돌파</span>
</li>
</ul>
</div>
</div>
</div>
)
}
'FrontEnd > React.js' 카테고리의 다른 글
[React] prettier와 eslint (0) | 2022.12.16 |
---|---|
[React] Project 관련 내용 (0) | 2022.11.03 |
[React] SCSS, styled-components (0) | 2022.11.03 |
[React] CSS, Image, className, 반복 요소 렌더링, list 복사 (0) | 2022.10.28 |
[React] 리액트 훅(React Hooks) (0) | 2022.10.27 |