박시은

(❁´◡`❁)

1 분 소요


세팅

create-next-app 사용

create-next-app을 사용하여 프로젝트를 생성했다면 Tailwind CSS 세팅은 필요 없다!


다른 방법 사용

다른 방법으로 프로젝트를 설치했다면 아래와 같은 단계를 거쳐야한다.

① tailwindcss postcss autoprefixer 를 설치하기

npm install -D tailwindcss postcss autoprefixer


② ailwind CSS의 config 파일을 생성하기

npx tailwindcss init -p


③ global.css에 아래 코드를 추가하기

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;


④ config 파일에 content부분에 path를 설정하기

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


그 외의 설정

절대경로 설정을 추가해준다. import/export 시에 경로를 깔끔하게 작성할 수 있다.

//tsconfig.json

{
  "compilerOptions": {
		"baseUrl": ".", <- 추가
    //...기존의 옵션들
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

//before
import { foo } from '../../components/bar';

//after
import { foo } fom 'components/bar';


eslint config에 아래 rules는 기본적으로 추가하면 좋다.

//.eslintrc

{
  "rules": {
    "react/react-in-jsx-scope": "off", //jsx파일에서 React를 import 하지 않아도 됨.
    "no-unused-vars": "off", //타입스크립트 사용시 interface의 변수명을 eslint가 잡지 않도록 함.
    "@typescript-eslint/no-unused-vars": "warn" //대신 사용하지 않는 변수는 @typescript/eslint를 통해 잡아줌.
  }
}


사용 방법

① 웹사이트 접속 Tailwind CSS

② 원하는 디자인을 검색

③ React 컴포넌트의 className에 원하는 스타일을 삽입


사용 예시

tailwind에서의 기본 단위 1은 0.25rem을 의미한다.

// src/app/page.tsx

import React from "react";

const MyPage = () => {
  return <div className="p-4">{/* 기존 코드 */}</div>;
};

export default MyPage;

npm run dev로 빌드 프로세스 실행하기!


참조


댓글남기기

참고