tailwind-css

tailwind-css

https://tailwindcss.com/docs/guides/create-react-app

Install Tailwind CSS with Create React App - Tailwind CSS

• tailwind css의 컨셉인 Utility-First로 인해 HTML과 CSS를 왔다갔다하면서 원하는 태그의 스타일을 변경하기 위해 시간을 쏟을 필요가 없고 클래스명도 고민할 필요가 없다
• 각 css 요소 수준의 유틸리티 클래슬르 제공하기 때문에 세밀하게 원하는 디자인을 구현할 수 있지만 디자인이 복잡해질 수록 코드가 못생겨진다 ㅠㅠ
• 또한 클래스 속성명에 대한 러닝커브가 존재하지만 Intelli Sense로 이를 해결할 수 있다!

사용법

• 설치하기 

yarn add -D tailwindcss postcss autoprefixer

• tailwindcss.config.js 파일 만들기

yarn tailwindcss init -p

• tailwindcss.config.js 파일 수정하기

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

• index.css 파일 상단에 아래 내용 추가하기

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

++ 스크롤바 삭제하기

• tailwind-scrollbar-hide 플러그인 설치하기

yarn add tailwind-scrollbar-hide

• tailwindcss.config.js 파일 plugin 부분에 추가하기

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  // 이부분
  plugins: [require("tailwind-scrollbar-hide")],
}

• 스크롤바를 사용하지 않을 요소에 scrollbar-hide 클래스 추가하기

<div className="scrollbar-hide"></div>