tailwindCSS

오픈 소스 CSS 프레임워크

예시

import logo from '../assets/logo.png';


export default function Header(){
    return (
        <header className='flex flex-col items-center mt-8 mb-8 md:mb-16'>
            <img src={logo} alt='logo' className='mb-8 w-44 h-44 object-contain'></img>
             <h1 className=' text-xl md:text-3xl  font-semibold tracking-widest uppercase text-amber-800 font-title '>ReactArt with Tailwind CSS</h1>
             <p className='text-stone-500'>A community of Artists and lovers.</p>
        </header>
    )
}

+) font family 적용법

1. tailwind.config.js 의 theme->extend
   fontFamily:{
   title :['"Pacifico"','cursive']
   }
2. 적용할 요소의 클래스이름에 font-title 넣기

---

후기

• 기존의 vanilla css를 사용할 줄 모르더라도 tailwind CSS를 이용하면 같은 효과를 낼 수 있다.
• tailwindCSS는 css 코드들을 대체하는 class 이름이 많기 때문에 공식문서를 참고하여 계속해서 사용해보면서 익숙해져야할 것 같다.
• CSS코드를 사용하지 않는 대신 클래스 이름으로 대체되기 때문에 하나의 태그에 엄청나게 많은 클래스이름이 생성돼 가시성이 좋지 않은 것 같다.
• tailwindCSS는 별도의 Component 생성없이 JSX코드안에 css가 포함되어 있기 때문에 큰 프로젝트 시 불필요한 컴포넌트의 수를 줄일 수 있을 것 같다.