Tailwind CSS (계속 추가중)

Tailwind Setup 은 참조 : https://luckseok.tistory.com/entry/1-Setup

#1 Setup

Tailwind CSS

• 마크업에서 직접 모든 디자인을 구축하도록 구성할 수 있는 flex, pt-4, text-center 및 rotate-90과 같은 다양한 클래스로 가득 찬 유틸리티 최초의 프레임워크이다.

https://tailwindcss.com

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

---

Tailwind CSS IntelliSense

• Visual Studio Code 사용자에게 자동 완성, 구문 강조 표시 및 린팅과 같은 고급 기능을 제공하여 Tailwind 개발 환경을 향상해 준다.
• 만약 플러그인 설치해도 recommend 기능이나 색깔 안 나오시는 분들은 vscode 버전확인 할 것.
  
  • vscode 버전 확인하는 방법은 맥 기준 commond + shift + p 하신 다음에 Tailwind CSS: show output 들어가서 오류메시지 뜨는 거 확인하면 된다.

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Tailwind CSS IntelliSense - Visual Studio Marketplace

---

Tailwind-Styled-Components

• 클래스네임이 많아서 불편하신 분들은 Tailwind-Styled-Components 이용해도 괜찮을 것 같다.

사용법

Using npm

npm i -D tailwind-styled-components

Using yarn

yarn add -D tailwind-styled-components

둘 중 설치한 후

import tw from "tailwind-styled-components"

const Container = tw.div`
    flex
    items-center
    justify-center
    flex-col
    w-full
    bg-indigo-600
`

render(
    <Container>
        <div>Use the Container as any other React Component</div>
    </Container>
)

기존 styled-components처럼 사용하면 된다.

https://www.npmjs.com/package/tailwind-styled-components

tailwind-styled-components

 

---

TailwindCSS Modifier 

https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

Handling Hover, Focus, and Other States - Tailwind CSS

---

Mobile First

• 기본적으로 Tailwind는 Bootstrap과 같은 다른 프레임워크에서 사용하는 것과 유사한 모바일 우선 breakpoint 시스템을 사용한다.
  이것이 의미하는 바는 접두사가 붙지 않은 유틸리티(예: uppercase)는 모든 화면 크기에 적용되는 반면 접두사가 붙은 유틸리티(예: md:uppercase)는 지정된 breakpoint 이상에서만 적용된다.
• 이 접근 방식이 사람들을 가장 자주 놀라게 하는 부분은 모바일용으로 스타일을 지정하려면 sm: 접두사가 붙은 버전이 아니라 접두사가 없는 버전의 유틸리티를 사용해야 한다는 것이다.
  sm을 "작은 화면에서"를 의미하는 것으로 생각하면 안된다.
  "작은 breakpoint"로 생각하면 된다.

<div class="sm:text-center"/> // => 작은 사이즈 (not 모바일)

• 이러한 이유로 디자인을 위한 모바일 레이아웃을 먼저 구현한 다음 sm 화면에 적합한 변경 사항을 레이어링 한 다음 md 화면 등을 적용하는 것이 좋다.

sm 640px @media (min-width: 640px) { ... }

md 768px @media (min-width: 768px) { ... }

lg 1024px @media (min-width: 1024px) { ... }

xl 1280px @media (min-width: 1280px) { ... }

2xl 1536px @media (min-width: 1536px) { ... }

https://tailwindcss.com/docs/responsive-design#mobile-first

Responsive Design - Tailwind CSS

---

Migrating to the JIT engine

• 2021년 3월에 발표한 새로운 Juse-in-Time 엔진이 Tailwind CSS v3.0의 클래식 엔진을 대체했다.
  새로운 엔진은 프로젝트에 필요한 스타일을 주문형으로 생성한다.

Tailwind CSS v3.0 이전

• 거대한 CSS 파일을 생성하고, 그 파일에 이미 정의해 놓은 클래스들을 가져와 사용하는 방식이다.
  대략 20만 줄 정도 되는 클래스로 가득 찬 파일을 가져와 개발 단계에서 사용하기 때문에 매우 무겁고, 배포 전에는 purge를 해줘야 해서 번거롭다.

Tailwind CSS v3.0 이후

• 사용자가 사용하는 스타일들만 그때그때 생성해서 사용하는 방식이다.
  여러 클래스들을 조합해서 사용할 수 있고, 매우 가볍고, 배포전 purge를 해주지 않아도 돼서 편하다.

https://tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine

Upgrade Guide - Tailwind CSS