[React] 스타일링 TailwindCSS

TailwindCSS?

가장 대표적인 Utility-First CSS 프레임워크다

이미 작성된 css 코드를 클래스명으로 가져다 쓸 수 있다

 

 

Utility-First? 

SASS나 styled-component 등 css보다 좋지만 css코드를 직접 작성해야한다는 건 변함이 없다

하지만 tailwindcss는 css코드가 이미 다 작성이 되어 있어서

css코드 작성없이 클래스명으로만으로 사용할 수 있기때문에

Utility란 이름에 맞게 css 코드 작성을 빠르게 처리가 가능하다

 

 

설치 방법 

// 설치
npm install tailwindcss postcss autoprefixer

// 설정 파일 생성
npx tailwindcss init -p

// 설정파일에서 설정
...
content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
],
...

// index.css에서 TailwindCSS에서 만든 CSS코드 호출
@tailwind base;
@tailwind components;
@tailwind utilities;

이후 tailwindcss 공식 문서를 보면서

필요한 클래스 이름을 가져다 사용하면 끝이다

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

 

@tailwind 호출 에러 

@tailwind를 호출하고 에러가 뜰 경우에는 아래의 플러그인을 설치해 해결할 수 있다

 

PostCSS Language Support

PostCSS Language Support - Visual Studio Marketplace

 

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense - Visual Studio Marketplace

└ tailwindCSS 클래스명 자동완성 기능도 지원한다

 

위 익스텐션을 설치하고도 에러가 유지되면

VSCode의 톱니바퀴 - 설정에서 file associ를 검색 후

Files: Associations에서 tailwindcss를 추가해주면 된다

 

 

 

Tailwind CSS의 장단점

Tailwind CSS의 장점 

CSS코드 작성을 최소화하다 못해 없애버렸다

CSS를 tailwind에서 다 만들어두고 개발자는 그저 클래스명만 가져다쓰면 끝이다

그래서 개발 속도까지 덩달아 향상되면서, tailwind에서 지원하는 CSS만 사용하기 때문에

일관된 디자인을 구성할 수 있게 된다

• CSS코드작성 최소화
• 개발속도 향상
• 체계적이고 일관된 디자인

 

Tailwind CSS의 단점 

다른 설치만 하면 끝나는 스타일링 기술에 비해 초기 설정이 길고 복잡하다

복잡한 CSS구조일 경우, 가져오는 클래스명이 그만큼 많아지기 때문에

코드가 길어지는 등 코드가 보기 불편해질 수 있다

무엇보다 이미 만들어진 CSS코드들을 전부 불러오는 것이기 때문에

CSS코드 용량이 커질 수 밖에 없다

• 초기 설정이 복잡함
• 코드가 안 이쁨
• CSS 크기용량 커짐