React Project에 Tailwind 적용하기

안녕하세요 !

 

오늘은 여러분들의 React 프로젝트에 Tailwind를 적용하는 법을 알아 볼 것입니다 !

 

Bootstrap이라는 프레임워크도 있지만, Tailwind라는 새로운 기술을 익혀보고 싶었거든요.

 

시작합시다.

합체

---

https://tailwindcss.com/

Tailwind CSS - A utility-first CSS framework for rapidly building custom designs

우선 tailwind는 이런 친구입니다.

 

Bootstrap처럼 css framework인데, 보다 customizing에 좀 더 용이한 프레임워크입니다.

 

저 또한 React를 공부 중인데, 이 tailwind를 제 React에 끼얹어보았는데, 너무 괜찮더라고요. 그래서 여러분들도 같이 이 기분을 느꼈으면 합니다.

 

우선 react 프로젝트를 만들어야겠죠. yarn이 아닌 npm으로 진행하겠습니다.

npx create-react-app react-tailwindcss && cd react-tailwindcss

npm install tailwindcss postcss-cli autoprefixer -D

npx tailwind init tailwind.js --full

 

그리고 postcss.config.js 파일을 만들어 줍시다.

postcss.config.js

const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
    tailwindcss('./tailwind.js'),
    require('autoprefixer')
  ]
};

그 후 src directory 안에 tailwind.css / main.css 파일을 만들어 줍시다.

src/tailwind.css

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

 

그리고 package.json의 scripts 부분을 아래와 같이 변경해줍시다.

package.json

...
"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css", 
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
},
...

React 프로젝트를 제작했으면 index.css가 있을텐데, 저희 이제 그거 안쓸거에요 !!

 

삭제를 해주시고, main.css를 import를 합시다.

index.js

import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
import App from "./App";
...

여기까지하면 끝 !!

 

한 번 적용을 해봅시다.

import React, { Component } from 'react';


class Header extends Component {
  render() {
    return (
      <div className="m-5">
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#HashTag</span>
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#HashTag</span>
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#HashTag</span>
      </div>
    );
  }
}

export default Header;

잘 적용이 됐습니다.

근데 저희 className에 저렇게 일일이 넣는거 개발자라면 끔찍하게 생각하는거잖아요. 그래서 저희가 tailwind.css를 만들었더랬죠.

src/assets/tailwind.css

@tailwind base;
@tailwind components;

.hash-tag {
  @apply inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2;
}
@tailwind utilities;

import React, { Component } from 'react';


class Header extends Component {
  render() {
    return (
      <div className="m-5">
        <span className="hash-tag">#HashTag</span>
        <span className="hash-tag">#HashTag</span>
        <span className="hash-tag">#HashTag</span>
      </div>
    );
  }
}

export default Header;

이렇게 해도 같은 결과를 얻을 수 있습니다 !!

 

대신 npm start를 다시 시작해야합니다. 저희가 package.json에다가 scripts를 수정했잖아요? 그래서 npm start를 다시 해야 그 css가 main.css에 적용이되면서 전체 프로젝트에 css가 끼얹어지는겁니다.

 

아시겠쥬?

---

이상 React Project에 Tailwind 적용하기였습니다. ^_^