React Next.js에 Tailwindcss 적용하기

시작하기

부트스트랩과 흡사한 ui 프레임워크 입니다.
Tailwind CSS는 사용자 지정이 가능한 저수준 CSS 프레임 워크로, 재정의를 위해 싸워야하는 성가신 스타일없이 맞춤형 디자인을 작성하는 데 필요한 모든 빌딩 블록을 제공하고 있습니다.

대부분의 ui 프레임워크의 경우 미리 디자인 되어 있는 구성요소가 있어 처음에는 빠른 장점이 있습니다.
하지만 사이트를 사용자가 지정한 디자인으로 할 경우 많은 제약이 따릅니다.
Tailwind는 HTML을 떠나지 않고도 사용자 정의 디자인을 만들 수있는 저수준 유틸리티 클래스를 제공하고 있습니다.

설치하기

의존성 설치

패키지들을 next 프로젝트에 설치해줍니다.

1
npm install tailwindcss autoprefixer postcss-loader --save-dev

next 플러그인을 설치해줍니다.

1
npm install @zeit/next-css

빌드 파이프 라인 구성

루트폴더에 postcss.config.js파일을 만들어 줍니다.
빌드 파이프라인을 설정해 주도록 합니다.

postcss.config.js
1
2
3
4
5
6
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
};
next.config.js
1
2
3
const withCSS = require('@zeit/next-css');

module.exports = withCSS({});

CSS에 Tailwind 추가

tailwindcss 구성 파일을 생성
npx tailwind init

tailwind를 css에 추가해줍니다.

styles/main.css
1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

CSS 가져 오기

pages/index.js 파일을 열어 tailwindcss를 추가합니다.

pages/index.js
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react'
import Link from 'next/link'
import Head from 'next/head'
import Nav from '../components/nav'

import '../styles/main.css'

const Home = () => (
<div>
<Head>
<title>Home</title>
</Head>

이제 className속성 에서 Tailwind CSS 유틸리티를 사용할 수 있습니다 !

Error

웹스톰에서 에러 밑줄과 unknown at rule 에러가 나오는 경우
unknown at rule

환경설정으로 들어가서 Preferences -> Editor -> Inspections
CSS -> Invalid elements 카테고리안에 unknown at rule 이부분의 체크를 해제 합니다.
환경설정

다음과 같이 에러가 사라졌습니다
환경설정

Share