[TailwindCSS] TailwindCSS란? TailwindCSS 사용법

회사에서 계속 CSS 라이브러리로 Styled-component만 썼는데 이에 국한되고 싶지 않아서 TailwindCSS를 공부하고 있다.

 

https://tailwindcss.com/

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

TailwindCSS

TailwindCSS는 유틸리티 우선 CSS 프레임워크로 아주 많은 클래스네임을 가지고 있다.

여기서 유틸리티란 tailwindCSS가 아주 많은 클라스네임을 가지고 있는 파일. 즉, 아주 큰 CSS 파일이라는 뜻이다.

그래서 tailwindCSS로 스타일을 주려면 클라스네임을 추가하고 조합하는 것이 전부이다.

그저 클라스네임으로 스타일을 주면 된다.

 

엄청 많은 클래스네임을 가진 큰 파일이기 때문에 클래스네임을 기억하기 아주 어려울텐데

이는 자동완성이 되도록 할 수 있다.

=> Tailwind CSS IntelliSense 을 vscode extension에서 다운받자!!!

 

TailwindCSS 셋업

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p (-p를 붙이면 postcss.config.js파일까지 생성)

npx tailwindcss init -p 이렇게 하면 postcss.config.js와 tailwind.config.js 생성된다.

 

postcss는 NextJS 프로젝트가 빌드되는 과정에서 CSS를 JS 번들에 추가시켜 주고,
이를 파싱하여 주는 것이 autoprefixer이다.

 

- tailwind.config.js

tailwind에게 어디에서 tailwind를 사용할 것인지 말해줘야하는데 그곳이 이곳이다.

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

대게 이렇게 쓰는데
./pages/**/*.{js,jsx,ts,tsx}은 ./pages의/모든 디렉토리의/ 모든 파일에서의.{확장자명} 이라는 뜻이다.

 

- styles > globals.css

styles > globals.css는 기본으로 깔리고 _app.tsx에 import하면 이게 global css가 된다.

@tailwind base;
@tailwind components;
@tailwind utilities;

globals.css에는 기본적으로 이 지시어들을 써줘야한다. 
@tailwind base, @tailwind components, @tailwind utilities는 Tailwind CSS에서 사용되는 지시어인데
이러한 지시어를 사용하여 Tailwind CSS 스타일을 프로젝트에 적용할 수 있기 때문이다.

@tailwind base는 프로젝트 전역에서 사용되는 기본 스타일을 설정하고 이 스타일은 전역 HTML 요소에 적용된다.
@tailwind components는 Tailwind CSS에서 제공하는 미리 만들어진 컴포넌트 스타일을 가져오는 데 사용된다. 예를 들어, 버튼, 입력 상자, 카드, 네비게이션 바와 같은 요소들을 포함한다.
@tailwind utilities는 유틸리티 클래스를 가져오는 데 사용되는데 유틸리티 클래스는 특정 스타일을 적용하는 데 사용된다. 예를 들어, bg-red-500 클래스는 배경색을 빨간색으로 지정한다.