패스트캠퍼스 챌린지 30일차 - 리액트 UI라이브러리 (Tailwind CSS)

 

 

Tailwind CSS

 

인라인 스타일을 사용하는 것만큼 쉽고 빠르게 스타일링 할 수 있으면서 일괄된 디자인을 가능하도록 해준다.

부트스트랩의 css 클래스 네이밍과 매우 유사하고,

클래스 네임으로 스타일링을 미리 다 구현했기 때문에 빠른 스타일링을 위해 익히고 있으면 효율은 배가 될수 있다.

 

// 설치하기
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

 

PostCSS

 

CSS 전처리기이며, CSS 작성을 더 편하게 만들어주는 javascript 도구들(Plugins)이다. javascript를 이용해서, CSS를 변경한다

// postcss.config.js

module.exports = {
    parser: 'postcss-scss', // 파서 옵션을 설정하고 싶다면 여기에서
    plugins: {
    	tailwindcss: { config: './tailwindcss-config.js' },
        <플러그인>: {},
        ...
    },
};

다양한 플러그인을 사용하여 css를 편하게 변경할 수 있다.

(위에서부터 아래로 실행하기 때문에 플러그인 실행순서가 중요하다.)

 

Tailwind css에서는 PostCSS와 함께 autoprefixer를 설치하여 모든 브라우저에 일괄된 css를 적용할수 있도록 했다.

 

 

vscode extention - Intelli Sense

 

미리보기, 자동완성, 신택스 하이라이팅, 린팅을 지원하기 때문에 조금만 익숙해지면 금방 문서 없이 개발할 수 있다.

 

Creating your configuration file

 

다크모드, 디바이스 설정에 따른 테마 전환, css 적용 등 설정파일을 작성해서 쉽게 설정할 수 있다.

purge 옵션을 통해 프로덕션 빌드시 설정된 파일에서 사용되지 않는 모든 클래스를 제거하여 파일 크기를 최소화해준다.

 

Utility-First

 

버튼이나 사이드바 메뉴 등 동일한 스타일을 여러 번 사용하게 되는 경우

@apply 하여 유틸리티 클래스를 추가로 만들어서 사용할 수도 있다.

 

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.