react+webpack+tailwindcss 설치하기!

요즘 핫?하게 떠오르고 있는 tailwindcss 를 react에 사용해보았다.
간단하게 tailwindcss를 왜 쓰는지 알아보고 가자!

 

TailwindCSS 장점?

테일윈드css는 utility-first 컨셉의 프레임워크다. 사전에 정의된 클래스를 사용하여 직접 HTML에 인라인 스타일로 바로 적용할 수 있다. utility-first를 사용하면 css를 90% 적게 적용 할 수 있으며 이로 인해 css 의 성능 및 유지비용이 10배 줄어 들 가능성이 있다. 커스텀도 자유롭게 가능하며 클래스명이나 컴포넌트의 네임명을 고민하지 않아도 된다는점!!

내가 주로 사용하는 styled-components와 비교해봤더니 바짝 쫒아오고있는..ㅎㅎㅎ
그래서 한번 나도 사용해보았다

 

1. npm 패키지 설치

npm install tailwindcss postcss autoprefixer --save-dev
npm install style-loader css-loader postcss-loader

postcss - js플러그인으로 스타일을 변환해줌, tailwindcss를 사용하려면 같이 설치해서 사용해야함.
autoprefixer - 자동으로 접두사를 추가해주는 postcss플러그인
style-loader,css-loader,postcss-loader - webpack이 인식을 해야 하기때문에 각 스타일 로더 설치

 

 

2. tailwind.config.js 생성

//tailwind.config.js

module.exports = {
//tailwindcss를 사용할 파일 경로 지정
  content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
  theme: {
    extend: {

    },
  },

  plugins: [],
};

폴더에 tailwind.config.js 파일을 생성 해주고 content 배열에는 css를 사용할 경로들을 넣어준다.
**은 src 폴더 내 모든 폴더 * 는 모든 파일을 의미한다. theme는 커스텀 하거나 자주 사용하는 값들을 지정 할 수 있는데 공식문서에 잘 나와있으니 참고해보자 

 

 

3.  postcss.config.js 생성

//postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwind.config.js' },
    autoprefixer: {},
  },
};

postCss가 처리하도록 tailwindcss와 autoprefixer를 플러그인에 지정해준다.

* 참고로 플젝을 typesciprt 사용해서 config 파일들을 js가 아닌 ts로 파일명을 지정해줬더니 적용이 안됬었음....🥲 무조건 js로 해줘야 하는건지는 모르겠다만,, 혹여나 나같은 실수를 하시는 분들이 있을까하여,,,ㅎㅎ,,

 

 

4. webpack 에 로더 설치

// webpack.config.js

...
 module: {
    rules: [
    // 스타일 로더
      {
        test: /\.css$/i,
        include: path.resolve(__dirname, 'src'),
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },

기본 webpack.config.js 구성 중 rules에 로더들을 추가해준다. webpack이 이 로더들을 인지해야 적용이 되기 때문에 추가해줘야 한다

 

5. css파일에 tailwind 적용

//styles.css

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

 

 

6. 컴포넌트에 tailwind 적용

import React from 'react';
import './styles.css';

function App() {
    return <h1 className="text-primary text-sm font-bold">TailwindCss 적용하기!</h1>;
}

export default App;

 

요런식으로 tailwind 스타일이 잘 적용되면 성공!!! 👍🏻

 

 

출처

https://locastic.com/blog/i-was-wrong-about-utility-first-css-and-here-is-why

I was wrong about utility-first CSS and here is why! - Locastic

https://dev.to/ivadyhabimana/setup-tailwind-css-in-a-react-project-configured-from-scratch-a-step-by-step-guide-2jc8