Webpack Tailwind Config

homewiz·2023년 11월 22일

React tailwind webpack

React [Webpack]

목록 보기

5/11

1. INTRO

Tailwind CSS는 오픈 소스 CSS 인기 프레임워크이다.

2. Install

yarn add --dev tailwindcss postcss autoprefixer postcss-loader

tailwindcss : 오픈 소스 CSS 프레임워크이다. 인기짱

postcss : JavaScript 플러그인을 사용하여 CSS를 변환

postcss-loader : Webpack 내부에서 PostCSS로 CSS를 처리.

autoprefixer : css 구문 분석후 all, break, custom, media query range와 같은 속성들을 최대한 많은 브라우저가 지원할 수 있게끔 자동으로 폴리필 해주는 라이브러리다. Google에서 권장하며 Twitter 및 Alibaba에서 사용됩니다.

3. Setting

3.1 create tailwind config file

yarn tailwindcss init

yarn run v1.22.19
$ C:\Projects\Sources\react-webpack\node_modules.bin\tailwindcss init

아래 파일이 생성된다.

반드시 적용 대상 파일을 기재 해줘야 한다. content: ["./src/*/.{js,jsx,ts,tsx}"]

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {}
  },
  plugins: []
};

Created Tailwind CSS config file: tailwind.config.js
Done in 1.56s.

3.2 create postcss.config.js

root/postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
};

3.3 add webpack.config

module: {
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/,
          use: ["babel-loader"]
        },
        {
          test: /\.(css|scss)$/i,
          - use: ["style-loader", "css-loader"]
          + use: ["style-loader", "css-loader", "postcss-loader"]
        }
      ]
    },

postcss-loader 를 추가 해준다.

3.4 add line @/src/index.js

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
+ import "tailwindcss/tailwind.css";
import App from "@/App";

const root = createRoot(document.getElementById("root"));
root.render(
  // StricMode 개발 초기에 구성 요소의 일반적인 버그를 찾을 수 있습니다.
  <StrictMode>
    <App />
  </StrictMode>
);

3.5 modify App.jsx

import React from "react";

const App = () => {
  return (
    <div>
      <div className="text-red-500 ">This is App.jsx</div>
    </div>
  );
};

export default App;