TailwindCSS

1. 개요

• 공식 사이트 링크

Tailwind CSS란?

• Utility-First CSS : 미리 설정된 유틸리티 클래스들을 조합하여 적용하는 방식 (예: Bootstrap)
• HTML 코드 안에 스타일 코드 작성
  • CSS 파일 별도로 관리할 필요 없음
  • 클래스명때문에 고민할 필요 없음
• 로우 레벨의 스타일 제공
  • CSS 요소 수준의 유틸리티 클래스를 제공
  • 세밀한 디자인 구현 가능
• 동일한 색상이나 사이즈, 간격등 일관된 디자인 적용 가능

2. 설치 및 설정

설치

• 설치 방법
  • tailwindcss CLI로 설치
  • PostCSS 플러그인으로 설치(권장)
    • 설치 방법
    • PostCSS : JS플러그인을 통해 스타일 변형하는 도구
      • CRA에서도 사용
      • autoprefixer 기능 사용 가능
  • 프레임워크에 추가
  • CDN 사용

설정

• tailwind.config.js
  • 기본 스타일, 플러그인 설정
    • theme> extend 객체 안에 넣어주지 않으면 기본 스타일 값이 덮어짐;;
    • variants : 반응형 및 preudo-class(ex. :hover...) 제어
      • key는 theme에서 사용하는 property임
      • 기본으로 지원되는 속성도 있음
        • 'responsive'
        • 'group-hover'
        • 'focus-within'
        • 'first'
        • 'last'
        • 'odd'
        • 'even'
        • 'hover'
        • 'focus'
        • 'active'
        • 'visited'
        • 'disabled'
      • varients를 커스텀하게 적용하는 경우 기본 값과 자동으로 마이그레이션 안됨
      • 기본 값과 추가로 정의할 때 활성화하고 싶은 모든 속성을 적어줘야함!

module.exports = {
	purge: ['./src/**/*.{js,jsx,ts,tsx}'], // 최적화
  darkMode: false, // or 'media' or 'class'
  theme: {
		extend: {
      fontFamily: {
        body: ["Open Sans", "system-ui", "sans-serif"],
        heading: ["Open Sans", "system-ui", "sans-serif"],
      },
	},
  variants: {
		appearance: ['responsive'],
    borderColor: ['responsive', 'hover', 'focus'],},
  plugins: [],
};

• Tailwind CSS 플러그인
  • tailwind 스타일 유틸리티 자동완성