TailwindCSS 사용 방법

TailwindCSS란?

• Utility-First 컨셉을 가진 CSS 프레임워크
• 프레임워크 내에 정의된 Utility Class를 사용해서 별도의 css 작성 없이 스타일링 가능

사용법

1. 프로젝트 생성

2. TailwindCSS 설치

npm install -D tailwindcss

3. tailwind.config.js 파일 생성

npx tailwindcss init

4. tailwind.config.js 파일 열고 템플릿 파일 경로 추가

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

5. ./src/index.css 파일 열고 Tailwind layer에 관한 @tailwind 추가

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

6. Unknown at rule @tailwind등의 경고문이 뜨면 PostCSS Language Support 확장 프로그램 설치하기

• Extension에서 설치하면 됨

또는,

vscode 설정(ctrl + ,) > unknown 검색 > Unknown At Rules 항목을 warning에서 ignonre 변경하면 됨

7. TailwindCSS 사용해서 스타일 지정하기

---

추가 TIP

• Tailwind CSS IntelliSense 설치하면 스타일링이 더 쉬움
• 자동완성, 오류, 버그 강조해주고 Class 이름에 hover하면 해당 Class의 style을 보여줌

---

참고

• https://velog.io/@dmk-jongwho/Tailwind-CSS-적용기1편-설치-사용
• 공식홈페이지
• https://velog.io/@mjieun/React-React%EC%97%90%EC%84%9C-Tailwind-CSS-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0