next에 tailwind css 추가하기
tailwind css+ 기능으로 css 관련 기능들을 편하게 쓸 수 있게 해준다. 물론 component가 제공되는 ui framework와는 다르지만 기본적인 패딩이나 글자 크기 등의 디자인 시스템을 편리하게 사용할 수 있다. 특히 사용하는 부분만 빌드할 때 포함되는 걸로 유명해 졌다.
NEXT에 tailwind 설치하기
npm install -D tailwindcss postcss autoprefixer
또는
yarn add tailwindcss postcss autoprefixer -D
npx tailwindcss init -p
이렇게 하면 tailwind.config.js
and postcss.config.js가 생긴다.
tailwind.config.js 에 사용하는 템플릿의 경로를 적어준다.
// tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
./styles/global.css 에 @tailwind 필요한 디렉티브를 추가해준다.
@tailwind base;
@tailwind components;
@tailwind utilities;
이렇게 한 후 yarn dev 또는 next run dev 를 해주면 된다.
<h1 className="text-3xl font-bold underline">Hello world!</h1>
다음 코드가 잘 나오는지 확인해 보자.
서버나 브라우저를 껐다 켜야 할 수 도 있다. 특히 global.css의 캐시가 남아있는 경우 브라우저를 리프레시해야 할 수 도 있다.
공유하기
조회수 : 959