cra없이 tailwind 구성

tailwind란 뭔가?

atomic css 또는 utilities css라고 불리는데

<div class="bg-red-500">

같은 식으로 html태그에 직접 css 스타일을 넣으면서 작업하는데
bg-red-500 같은 스타일은 tailwind-Css에 미리 저장되어 있어서 css파일을 따로 생성 하지 않고 html 또는 jsx파일 내에서 css를 tailwind에서 골라 쓰는 방식이다.

tailwind 단점

단점은 역시 초기 러닝커브이다 어떤 클래스네임이 어떤 스타일인지 홈페이지에서 확인을 해야한다.

post css란

https://en.wikipedia.org/wiki/PostCSS
설명이 잘 되어 있지만
내가 이해한 바로는 js로 만들어진 플러그인을 이용해서 css파일에 자동으로 어떠한 기능을 넣어주는 모듈같다.
그래서 postcss자체로는 하는게 없고
플러그인과 같이 사용한다.

tailwind 설치 방법

먼저 공홈을 보자
https://tailwindcss.com/docs/installation/using-postcss
나는 이대로 했는데 안되서 이글을 쓰게 되었다.

일단 먼저 tailwind랑 postcss랑 필요한 모듈들을 설치한다.

npm install -D tailwindcss  postcss autoprefixer postcss-cli

그리고 난뒤

해당프로젝트 가장 상위 폴더에 - pakage_json파일 있는곳에다
postcss.config.js 파일을 생성한뒤
플러그인 설정을 해준다.

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

tailwindcss 우리가 쓰려고 하는거고 autoprefixer는 브라우저 별 대응을 할수있게 해주는 플러그인이다 --webkit같은걸 붙여준다.

그리고 npx tailwindcss init 명령어로 만들거나
아니면 그냥 tailwind.config.js 파일을 만들어준뒤

module.exports = {
    content: [
   
    "./src/**/*.{html,js}"],
    theme: {
      extend: {},
    },
    plugins: [],
  }

파일안에 이렇게 입력해주면 된다.
저기 content 속성값이 내가 오늘 이글을 쓰게 된 이유다.

tailwindcss 3버전부터 저걸 안넣어주면 작동이 안된다더라.
공홈에 적어둔지는 모르겠지만 못봐서 삽질을 3시간했다 ㅜ
다른 블로글은 다 purge던데

그리고 webpack 설정을 수정해 주면 된다.

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

console.log(__dirname);
module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: ["react-refresh/babel"],
        },
      },
      // CSS 처리에 대한 것.
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js",
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist/"),
    },
    hot: true,
    port: 3000,
  },
  plugins: [
    new ReactRefreshWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

css처리에 대한것 라고 적힌 주석이 있는데
저기 아래에 다가 postcss-loader를 추가해준것이다.
이렇게 하면 끝이다

이제 원래 한것처럼

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch",
    "dev": "webpack serve --hot",
  },

npm 설정파일인데 저기 보이는것 처럼 그냥 dev서버를 실행시켜주면 알아서 잘 해준다.

원래는 tailwindcss 파일이 전부올라가면 너무 커서 purge값과 플러그인을 설정해서 필요한 class만 배포할수있게 해야하는데

tailwindcss 3 버전부터는 purge -> content으로 이름이 변경되었고, 자동으로 사용하는 className만 올려주는것 같다.

그리고 src폴더 아래애

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

원하는 파일명으로 css 파일을 만든뒤
index.js 파일에다가 import 시키면 된다