React Project | Postcss란 ?

Postcss란 ?

CSS를 변환하기 위한 도구로, 플러그인을 통해 CSS를 처리하고 변환함

CSS 후처리기라고도 불림

Postcss 안의 플러그인을 사용 --> Autoprefixer 등 많은 플러그인 사용 가능

 

1. 코드 가독성 향상

can I use 사이트의 값을 사용해서 css 규칙에 공급업체(provider) 접두사(prefixes)를 추가함

Autoprefixer는 현재 브라우저 인기도 및 속성 지원을 기반으로 데이터를 사용해서 접두사를 적용함

 

2. 최신 css 사용

PostCSS Preset Env를 사용하면 최신 css의 대부분의 브라우저가 이해할 수 있는 것으로 변환하고 cssdb를 사용하여

대상 브라우저 또는 런타임 환경에 따라 필요한 폴리필을 결정할 수 있음

 

3. css 모듈 사용

css 모듈은 기본적으로 모든 클래스 이름과 애니메이션 이름의 범위가 로컬로 지정되는 css 파일

 

 

4. 오류 방지

stylelint를 사용해서 일관된 규칙을 적용하고 스타일시트의 오류 방지

SCSS와 같은 CSS와 유사한 구문 뿐만 아니라 최신 CSS 구문을 지원함

 

 

프로젝트 설정

npm install postcss tailwindcss autoprefixer

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

npx tailwindcss init

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./src/index.css"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

 

 

 

---

https://postcss.org/

PostCSS - a tool for transforming CSS with JavaScript

https://preset-env.cssdb.org/

PostCSS Preset Env - CSSTools

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc