Tailwind UI

HTML을 벗어나지 않고도 최신 웹사이트를 빠르게 구축하세요.

클래스가 포함된 유틸리티 중심 CSS 프레임워크로 , 마크업에서 직접 모든 디자인을 빌드하도록 구성할 수 있습니다. 사용자가 직접 디자인 시스템을 구축하고, 재사용 가능한 스타일을 적용할 수 있도록 도와줍니다.

Installation

npm install -D tailwindcss
npx tailwindcss init

https://tailwindcss.com/docs/installation

---

tailwind.config.js

Tailwind 설치를 구성하고 사용자 지정하는 방법 가이드

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    }
  },
}

• theme.colors 직접 지정하면, Tailwind CSS에서 기본 제공하는 색상이 완전 덮어쓰여지게 됨. 즉, Tailwind가 제공하는 기본 색상들을 사용하지 않고, tailwind.config.js 파일에 정의한 커스텀 색상만 사용하겠다는 뜻.
• Tailwind에서 제공하는 스타일도 쓰고 싶고 추가로 커스텀 하고 싶으면 extend에 작성.

Responsive Design (반응형 디자인)

반응형 유틸리티 변형을 사용하여 적응형 사용자 인터페이스를 구축합니다.

• 대충 쓱 보고 max-width 인줄 알았더니 min-width
  하던 작업 다시 함. 공식 문서를 잘보자
• xl: 하고 뒤에 오는 모든 스타일이 해당 break-point에 적용되는 줄 알았는 데, xl:pa-0 xl:flex... 이런식으로 앞에 다 적어줘야함.

clac() 가 된다.

• 안되는줄 알았더니 어라라 된다.
• 업데이트 된 가이드 확인하세요
  https://tailwindcss.com/docs/upgrade-guide#negative-values-removed
  

---

🐍이번 프로젝트 동안 쓰면서 이슈 업뎃 해보겠어요