리엑트/뷰 프로젝트에서 테일윈드 CSS 적용하기 (React/Vue + Tailwind CSS)

UI 프레임워크 몇 가지를 써봤는데 결국 커스텀하는 부분에서 어려움을 많이 겪었습니다.
그러던 가운데 Tailwind CSS를 알게 되어 써보니 미리 정의되어 있는 클래스 이름만 사용하면 되기 때문에 괜찮은 접근 방법이었습니다.

React + Tailwind CSS 설정

React 프로젝트 생성

1
2
$ create-react-app ${PROJECT_NAME}
$ cd ${PROJECT_NAME}

Tailwind CSS 패키지 설치

1
$ yarn add --dev tailwindcss autoprefixer postcss-cli

/tailwind.config.js 생성

1
$ node_modules/.bin/tailwind init tailwind.config.js

/postcss.config.js 생성 및 설정코드 작성

1
$ vi postcss.config.js
1
2
3
4
5
6
7
const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer'),
    ],
};

/src/styles/index.css 파일 및 tailwind 설정

1
2
3
@tailwind preflight;
@tailwind utilities;
/* Your custom CSS here */

/src/index.js 파일 수정

index.js 파일에 import ‘./index.css’ 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import './index.css' // 추가
import RouterIndex from './routers'
import store from './stores'
import registerServiceWorker from './registerServiceWorker'

ReactDOM.render(
    <Provider store={ store }>
        <RouterIndex />
    </Provider>,
    document.getElementById('root')
)
registerServiceWorker()

/package.json - scripts 항목 수정

1
2
3
4
5
6
7
8
9
10
11
12
{
...
  "scripts": {
        "build:css": "postcss src/styles/index.css -o src/index.css",
        "watch:css": "postcss src/styles/index.css -o src/index.css -w",
        "start": "npm run watch:css & node scripts/start.js",
        "build": "npm run build:css && node scripts/build.js",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
    }
...
}

Vue + Tailwind CSS 설정

Vue 프로젝트 생성

1
2
$ vue init webpack ${PROJECT_NAME}
$ cd ${PROJECT_NAME}

Tailwind CSS 패키지 설치

1
$ npm install tailwindcss --save-dev

/tailwind.config.js 생성

1
$ node_modules/.bin/tailwind init tailwind.config.js

/.postcssrc.js 생성 및 설정코드 작성

1
$ vi .postcssrc.js
1
2
3
4
5
6
7
module.exports = {
  "plugins": [
    require('postcss-import')(),
    require('tailwindcss')('./tailwind-config.js'),
    require('autoprefixer')(),
  ]
}

/src/assets/styles/main.css 파일 생성 및 tailwind 설정

1
2
3
@tailwind preflight;
@tailwind utilities;
/* Your custom CSS here */

/src/App.vue 파일 수정

App.vue 파일에 import ‘@/assets/styles/main.css’ 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
import '@/assets/styles/main.css' //추가

export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Resource