Next.js에서 Tailwindcss 사용해보기

 

항상 Scss나 styled-components를 선호해 왔지만, 새로운 프로젝트를 시작하면서 다른 CSS 라이브러리를 시도해보고 싶다는 생각이 들었다. 사용해 보니 사용법이 매우 간편하고, 무엇보다도 클래스명을 고민하는 시간을 아낄 수 있다는 점이 가장 좋았다.

 

 

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

 

1. 프로젝트에서 tailwindcss, postcss, autoprefixer를 설치한다

install -D tailwindcss postcss autoprefixer

 

2. init 명령어를 통해 tailwind.config.js 파일을 생성한다

npx tailwindcss init

 

3. tailwind.config.js에서 tailwindcss 기능을 적용시킬 파일들의 경로를 명시한다.

나는 app 폴더와 components 폴더의 파일들에 설정했지만 이건 자신의 프로젝트에 맞게 설정해주면 된다.

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

 

4. 확장프로그램 Tailwind CSS IntelliSense를 설치한다. 

클래스에 작성 시 아래처럼 입력한 문자로 시작하는 클래스명들을 보여주는 기능이 있다.

 

5. 프로젝트의 global.css파일에서 다음을 추가한다.

/* global.css */

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

 

6. tailwindcss를 사용하여 css를 작성한다.

공식 홈페이지 문서에 나온 클래스명들을 찾아보며 적용시키다보면 tailwind 클래스명이 간단하고 직관적이기에 금방 익숙해져 찾아보지 않아도 편하게 작성이 가능하다.

• ex) tailwindcss사용하여 간단한 버튼 스타일링하기

import React from 'react';

const Test = () => {
  return (
    <div>
      <button className="w-20 h-10 bg-blue-300 text-base text-white rounded-2xl">
        Click
      </button>
    </div>
  );
};

export default Test;

• 위 코드 결과