TailWind CSS + PostCSS & AutoFixer

TailWind CSS

• HTML 내에서 CSS를 사용할 수 있게 해주는 CSS Framework.

장점

• 부트스트랩과 같이 이미 설정된 유틸리티 클래스를 활용.
• HTML에서 스타일링 가능.
• 빠른 스타일링 작업 가능.
• Class나 id 네이밍 하는 고생을 하지 않아도 됨.

IntelliSense 플러그인

• 유틸리티 클래스가 익숙해질 때 까지 사용 가능. (예시 제공)
  

TailWind CSS

시작하기

% npx tailwindcss init

1. tailwind.config.cjs 파일이 자동으로 생성됨.

module.exports = {
	content: [
      './src/**/*.{js,jsx,ts,tsx}',
      './index.html',
      './src/styles/main.css'
    ],
    theme: {
    	extend: {},
    },
    plugins: [],
}

2. 루트(/)에 postcss.config.cjs 파일 생성하기.

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

3. index.css 수정

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

PostCSS & AutoFixer

$ npm install -D tailwindcss postcss autoprefixer

postCSS란?

• JS로 CSS를 변환하는 도구.