tailwind css 사용하기 (CRA, Next.js)

설치

cra의 경우 tailwindcss의 설치만 하면 된다. develop 옵션을 주어 설치해준다.

npm install -D tailwindcss
npx tailwindcss init

next.js의 경우 추가적인 라이브러리의 설치가 더 필요하다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npx tailwindcss init -p를 통해서 tailwind.config.js 파일이 최상단에 자동으로 만들어지게 된다.

tailwind.config.js 작성하기

cra의 경우

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

next.js의 경우

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,jsx,ts,tsx}',
    './src/components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

생성된 설정파일을 수정한다.

content는 프로젝트에서 tailwind css를 사용하는 컴포넌트들이 모두 포함될 수 있도록 한다.

content에 포함되지 않은 파일에서는 tailwind css를 사용할 수 없으니 주의하도록 하자.

cra 설정과 next 설정에서 차이나는 부분은 단지 컴포넌트가 어떤 폴더에 위치해 있는지 파악하는 것 뿐이다.

다양한 커스텀이 될 수 있는 부분이므로 각자 환경에 맞게 폴더 위치를 설정한다.

 

🎉 이때, content에 포함된 파일에서 사용된 tailwindCSS className에 해당하는 CSS만을 포함하는 CSS 파일이 후처리로 생성되기 때문에, 사용되지 않은 tailwindCSS의 클래스 이름이 빌드에 포함되지 않는다. 👏
(PostCSS가 후처리를 한다)

v3부터는 Just-in-Time engine (JIT 엔진)이 처리하여 사용한 tailwindcss의 클래스들이 하나씩 추가되는 방식이다.

CSS 설정

cra의 경우엔 ./src/index.css,

next.js의 경우에는 globals.css에 다음과 같이 작성한다.

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

최상단 CSS에서 tailwind 설정을 한다.

 

https://tailwindcss.com/docs/guides/nextjs

Install Tailwind CSS with Next.js - Tailwind CSS

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

 

위와 같은 설정 과정이 끝났다면, 이제 tailwind css를 사용할 수 있다.

tailwind css는 규칙에 따라 태그에 클래스 이름을 적기만 하면, 해당 스타일이 적용되기에 간편하고, JSX나 TSX 문에서 바로 스타일을 적용하고 확인할 수 있다는 장점이 있다.

필요한 스타일의 클래스 이름은 공식 문서에서 찾아볼 수 있다.

https://tailwindcss.com/docs/text-color

Text Color - Tailwind CSS

VS Code를 사용한다면, 확장 도구인 Tailwind CSS IntelliSense를 사용하여 더 간편하게 tailwind css를 사용할 수 있다.

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss 

Tailwind CSS IntelliSense - Visual Studio Marketplace