🤩 Tailwind CSS
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Documentation for the Tailwind CSS framework.
tailwindcss.com
유틸리티 우선 CSS 프레임워크이다.
마크업에서 직접 모든 디자인을 구축하도록 구성할 수 있는 flex, pt-4, text-center 및 rotate-90과 같은 다양한 클래스로 가득 찬 유틸리티 최초의 CSS 프레임워크입니다.
유틸리티 우선이란?
- tailwind css가 아주 많은 클래스네임을 가지고 있다는 의미이다.
flex에서 space를 사용하면 요소 사이에 margin을 생성해 준다. (자식 요소에 마진을 줄 수 있다.)
space : hidden되어있지 않은 모든 자식요소에 margin을 준다.
x가 붙으면 수평(좌,우) 방향 y가 붙으면 수직(상,하)방향을 의미한다.
ring utility
- class 이름으로 ring을 작성한다.
<div className="space-x-2">
<button className="w-5 h-5 rounded-full bg-yellow-500 focus:ring-2 ring-offset-2 ring-yellow-500 transition" />
<button className="w-5 h-5 rounded-full bg-indigo-500 focus:ring-2 ring-offset-2 ring-indigo-500 transition" />
<button className="w-5 h-5 rounded-full bg-teal-500 focus:ring-2 ring-offset-2 ring-teal-500 transition" />
</div>
- border로 ring이 생긴다.
- ring은 커스터마이징하기 쉽다.
- offset 속성을 줘서 간격을 만들 수 있다.
Modifiers for Lists
list를 만들고 list별로 스타일을 다르게 적용하고 싶은 경우 간단한 Modifiers를 사용하여 적용할 수 있다.
- first : 첫번째 아이템에만 적용
- last : 마지막 아이템에만 적용
- odd : 홀수번째만 적용
- even : 짝수번째만 적용
- only : 아이템이 여러개일 경우는 적용이 안되고 오직 한 개의 아이템만 있을때 해당하는 아이템에만 적용
<ul>
{[1, 2, 3, 4].map((i) => (
<div
key={i}
className="flex justify-between my-2 odd:bg-blue-50 even:bg-yellow-50 first:bg-teal-50 last:bg-amber-50 only:bg-red-50 "
>
<span className="text-gray-500">Grey Chair</span>
<span className="font-semibold">$170</span>
</div>
))}
</ul>empty
- Tailwind 기능이 아닌 그냥 css selector
{['a', 'b', 'c', ''].map((c, i) => (
<li key={i} className="bg-red-500 py-2 empty:bg-blue-500 " >{c}</li>
))}
- empty를 사용하면 내용이 빈 아이템에만 스타일이 적용된다.
- empty:hidden : 빈 아이템은 안 보이게 할 수 있다.
Group
- 먼저 group안에 어떤 요소가 포함되는지 tailwind에게 알려줘야한다. (target하고 싶은 요소에게)
<div className="bg-white overflow-hidden rounded-3xl shadow-xl group">
<div className="bg-blue-500 p-6 pb-14">
<span className="text-white text-2xl">Profile</span>
</div>
<div className="rounded-3xl p-6 bg-white relative -top-5">
<div className="flex relative -top-16 items-end justify-between">
<div className="flex flex-col items-center">
<span className="text-xs text-gray-500">Orders</span>
<span className="font-medium">340</span>
</div>
<div className="h-24 w-24 bg-zinc-300 rounded-full group-hover:bg-red-300" />
<div className="flex flex-col items-center">
<span className="text-xs text-gray-500">Spent</span>
<span className="font-medium">$340</span>
</div>
</div>
<div className="relative flex flex-col items-center -mt-14 -mb-5">
<span className="text-lg font-medium">Tony Molloy</span>
<span className="text-sm text-gray-500">미국</span>
</div>
</div>
</div>
- 그룹화할 전체 부모 요소에 group className을 주고 style을 변경할 자식요소에 해당하는 스타일을 지정해준다.
- ex) group-hover:bg-red-300 : group요소에 마우스 hover하면 배경색이 변경된다.
form
- required : required 속성이 있을 경우에만 적용된다.
- invalid : required 속성이 있는 경우에 default값으로 invalid 값이 된다.
- placeholder-shown : placeholder가 보여지는 경우 (즉, input창에 아무것도 없어서 placeholder가 보이는 경우)에만 스타일이 적용된다.
- focus-within : form내부 요소로 있는 input, textarea 등이 focus되었을 경우 스타일이 적용된다.
- disable : disabled 속성이 있는 경우에만 스타일 적용
- valid : input에 값을 입력하면 스타일이 적용
<form className="flex flex-col space-y-2 p-5 focus-within:bg-blue-100 ">
<input type="text" required placeholder="Username"
className="border p-1 peer border-gray-400 rounded-md required:border-2 border-yellow-500 invalid:bg-red-500 placeholder-shown:bg-teal-500" />
<span className="hidden peer-invalid:block peer-invalid:text-red-500">This input is invalid</span>
<span className="hidden peer-valid:block peer-valid:text-teal-500">Awesome username</span>
<span className="hidden peer-hover:block peer-hover:text-amber-500">Hello</span>
<input type="submit" value="Login" className="bg-white" />
</form>peer
- input의 상태에 따라서 스타일을 변화시킬 수 있다.
- ex) peer-invalid: peer가 설정된 요소에 값이 없는 경우에 스타일 적용
- 단 peer가 적용된 요소가 먼저 작성되어야 한다. (순서에 영향을 받는다.)
More Modifiers
<div className="flex flex-col space-y-2 p-5 ">
<p className="first-letter:text-7xl first-letter:hover:text-purple-400">Hello everyone!</p>
</div>
- first-letter: 첫글자에만 스타일이 적용된다.
details
- HTML tag
<details className="select-none open:text-white open:bg-indigo-400">
<summary>What is my fav. food.</summary>
<span>고기</span>
</details>
- <summary> : details 태그의 제목을 쓰는 영역
file
<div className="flex flex-col space-y-2 p-5 ">
<input type="file" className="file:border-0 file:rounded-md file:bg-purple-400" />
</div>여러 Modifiers들을 중첩해서 사용할 수 있다
<input type="file" className="file:hover:text-purple-400 file:border-0 file:rounded-md file:bg-purple-400" />
- file:hover: 이런식으로 중첩 사용이 가능하다.
Responsive Modifiers
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) { ... } (640px 이상에 전부 적용)
md 768px @media (min-width: 768px) { ... } (768px 이상에 전부 적용)
lg 1024px @media (min-width: 1024px) { ... } (1024px 이상에 전부 적용)
xl 1280px @media (min-width: 1280px) { ... } (1280px 이상에 전부 적용)
2xl 1536px @media (min-width: 1536px) { ... } (1536px 이상에 전부 적용)
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
tailwindcss.com
Customizing breakpoints
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
tailwindcss.com
- portrait : 모바일에서 세로(기본)모드를 했을 경우 스타일 적용
- landscape : 모바일에서 가로모드를 했을 경우 스타일 적용portrait 및 landscape 수정자를 사용하여 뷰포트가 특정 방향에 있을 때 조건부로 스타일을 추가합니다.
- div class="portrait:hidden" div class="landscape:hidden"
- Viewport orientation
Dark Mode
Tailwind CSS의 다크모트 쿼리가 기본값으로 브라우저의 설정을 따라간다.
darkMode: 'class',
- 위와 같이 설정하면 js로 토글 시켜서 다크모드를 on/off 할 수 있다.
<div className="bg-white dark:bg-black flex flex-col justify-between p-6 rounded-3xl shadow-xl">
<span className="font-semibold dark:text-white text-2xl">Select Item</span>
{/* <div className="flex justify-between my-2">
<span className="text-gray-500">Grey Chair</span>
<span className="font-semibold">$170</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Tooly Table</span>
<span className="font-semibold">$800</span>
</div> */}
<ul>
<div className="flex justify-between my-2 ">
<span className="text-gray-500 dark:text-gray-100">Grey Chair</span>
<span className="font-semibold dark:text-white">$19</span>
</div>
<div className="flex justify-between my-2 ">
<span className="text-gray-500 dark:text-gray-100">Grey Chair</span>
<span className="font-semibold dark:text-white">$19</span>
</div>
</ul>
<div className="flex justify-between mt-2 pt-2 border-t-2 border-dashed">
<span>Total</span>
<span className="font-semibold">$10</span>
</div>
<button
className="mt-5 bg-blue-500 dark:bg-black dark:border-white dark:border text-white p-3
text-center rounded-xl w-3/4 block mx-auto
dark:hover:bg-white hover:bg-teal-500 hover:text-black
active:bg-yellow-500 focus:bg-red-500
"
>
Checkout
</button>
</div>Tailwind에는 dark 모드가 활성화되어 있을 때 사이트 스타일을 다르게 지정할 수 있습니다. 현재 사용 중인 컴퓨터에서 설정한 라이트 모드 또는 다크 모드에 따라 dark가 자동으로 적용됩니다.
ex) dark:bg-slate-900
Dark Mode - Tailwind CSS
Using Tailwind CSS to style your site in dark mode.
tailwindcss.com
수동으로 다크 모드 전환
운영 체제 기본 설정에 의존하는 대신 수동으로 다크 모드 전환을 지원하려면 media 대신 class을 사용하십시오.
// tailwind.config.js
module.exports = {
// 클래스를 기준으로 다크모드 적용 (최상위 부모에 dark클래스 지정) -> 토글 기능을 추가해서 on을 하면 최상위 부모 태그에 dark를 추가해줘야 한다.
darkMode: 'class',
// @media(prefers-color-scheme)를 기준으로 다크모드 적용 (기본 값)
darkMode: "media",
}
<https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually>
prefers-color-scheme
prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.
@media (prefers-color-scheme: light) {
.themed {
background: white;
color: black;
}
}
prefers-color-scheme - CSS: Cascading Style Sheets | MDN
prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.
developer.mozilla.org
Just In Time Compiler
Migrating to the JIT engine
2021년 3월에 발표한 새로운 Just-in-Time 엔진이 Tailwind CSS v3.0의 클래식 엔진을 대체했습니다. 새로운 엔진은 프로젝트에 필요한 스타일을 주문형으로 생성합니다.
Tailwind CSS v3.0 이전: 거대한 CSS파일을 생성하고, 그 파일에 이미 정의해놓은 클래스들을 가져와 사용하는 방식.
대략 20만줄 정도 되는 클래스로 가득찬 파일을 가져와 개발 단계에서 사용하기 때문에 매우 무겁고, 배포 전에는 purge를 해줘야 해서 번거로움
Tailwind CSS v3.0이후: 사용자가 사용하는 스타일들만 그때 그때 생성해서 사용하는 방식. 여러 클래스들을 조합해서 사용할 수 있고, 매우 가볍고, 배포 전 purge를 해주지 않아도 되서 편함
Upgrade Guide - Tailwind CSS
Upgrading your Tailwind CSS projects from v2 to v3.
tailwindcss.com
Tailwind CSS v3.0 이후 부터 중첩 선택자가 가능해졌다. 바로 Just-In-Time 컴파일러 때문에
우리의 파일을 모두 스캔해서 사용하는 클래스명을 제외하고 전부 삭제하는 프로세스 ⇒ purge (컴파일해서 사용하지 않는 불필요한 클래스를 청소하는 작업이라 할 수 있다.)
Just-In-Time 컴파일러를 사용해서 커스텀 클래스를 동적으로 생성할 수 있게 되었다.
<div className="dark:md:hover:bg-teal-400 bg-[url('/vercel.svg')]">
<h2 className="text-[97851px] text-[#000]">Hello</h2>
</div>
- 대괄호 [] 안에 원하는 스타일을 입력하면 동적으로 적용된다.
Next.js 프로젝트에 적용하기
관련 라이브러리를 설치한다.
npm install -D tailwindcss postcss autoprefixer
# or
yarn add -D tailwindcss postcss autoprefixer
설치가 완료되면 터미널에서 아래 명령어 실행
npx tailwindcss init -p
폴더 root 경로에 postcss.config.js / tailwind.config.js 두 파일이 생성된다.
postcss.config.js 파일은 따로 수정하지 않고 tailwind.config.js 파일만 수정한다
//tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"
],
theme: {
extend: {},
},
plugins: [],
}
- tailwindcss를 적용할 위치를 content영역에 지정한다. → 위 예제에서는 pages, components 폴더안에 있는 모든 파일에 적용한다는 의미이다.
globals.css 파일을 수정해 준다.
@tailwind base;
@tailwind components;
@tailwind utilities;
- create-next-app 으로 프로젝트를 만들었을 때 기본으로 생성되는 globals.css의 모든 내용을 지우고 위 내용을 작성한다.