TailWindCSS

CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크

CSS 프레임 워크란?

• CSS 프레임워크는 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화 하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음

• 더 빠르게 애플리케이션을 스타일링 하는데 도움을 줌

TailWindCSS장점

• 부트스트랩과 비슷하게 미리 세팅된 Utility Class를 활용하는 방식으로 HTML에서 스타일링 가능
  

• 빠른 스타일 가능
• class 혹은 id명을 작성하기 위해 고생을 하지 않아도 됨

사용 방법

tailwindcss: https://tailwindcss.com/

Terminal

설치: npm install -D tailwindcss
npx tailwindcss init

tailwind.config.js

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

src/input.css

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

설치시 에러 메세지 발생 할 수 있음 이때

PostCSS Language Support 익스텐션 설치 시 경고가 사라진다.

Tailwind CSS IntelliSense익스텐션 설치 시 사용가능한 tailwindCSS를 미리 확인할 수 있다.