Is Tailwind

utility-first CSS framework packed

Install

yarn add --dev tailwindcss postcss autoprefixer

Init

yarn tailwindcss init -p

file: root/tailwind.config.js 생성후 수정

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

Project 전역설정 type1

file: root/index.css 내용 전체 삭제 후 아래 코드 복사

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

• tailwind에는 기본적으로 사용하는 nomalize가 있기때문에 별도로 처리 한다면 에러가 발생할 수 있다.

Project 전역설정 type1

• type1대신 index.js에서 tailwind.css 를 로드 시킨다.
  file: root/index.js

import React from "react";
import ReactDOM from "react-dom/client";
+ import "tailwindcss/tailwind.css";
- import "./index.css";
import App from "./App";
...

참조:
https://tailwindcss.com/docs/installation/using-postcss