tailwind 다루기

같이 보기

https://tailwindcomponents.com/cheatsheet/

https://umeshmk.github.io/Tailwindcss-cheatsheet/

단위 표기

• 1 = 0.25rem = `4px`
• `w-full` = width: 100%
• `w-screen` = width: 100vw
• `max-w-xs` = max-width: 20rem

Max / Min

max-width	CSS	min-width	CSS
max-w-xs	max-width: 20rem	min-w-0	min-width: 0
max-w-sm	max-width: 30rem	min-w-full	min-width: 100%
max-w-md	max-width: 40rem
max-w-lg	max-width: 50rem
max-w-xl	max-width: 60rem
max-w-2xl	max-width: 70rem
max-w-3xl	max-width: 80rem
max-w-4xl	max-width: 90rem
max-w-5xl	max-width: 100rem
max-w-full	max-width: 100%

Font 

font-size	CSS	font-weight	CSS	line-height	CSS
text-xs	font-size: .75rem	font-hairline	font-weight: 100	leading-none	line-height: 1
text-sm	font-size: .875rem	font-thin	font-weight: 200	leading-tight	line-height: 1.25
text-base	font-size: 1rem	font-light	font-weight: 300	leading-normal	line-height: 1.5
text-lg	font-size: 1.125rem	font-normal	font-weight: 400	leading-loose	line-height: 2
text-xl	font-size: 1.25rem	font-medium	font-weight: 500
text-2xl	font-size: 1.5rem	font-semibold	font-weight: 600
text-3xl	font-size: 1.875rem	font-bold	font-weight: 700
text-4xl	font-size: 2.25rem	font-extrabold	font-weight: 800
text-5xl	font-size: 3rem	font-black	font-weight: 900

Colors

• transparent
• black
• slate
• gray
• zinc
• neutral
• stone
• amber
• yellow
• lime
• green
• emerald
• teal
• cyan
• sky
• blue
• indigo
• violet
• purple
• fuchsia
• pink
• rose
• red
• orange
• white

Modifiers

<p class="bg-green-600 hover:bg-green-800">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p>

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

다크 모드

<p class="text-gray-500 dark:text-gray-300">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</p>

Flex

container	CSS	flex-direction	CSS	flex-wrap	CSS
flex	display: flex	flex-row	row	flex-no-wrap	nowrap
inline-flex	display: inline-flex	flex-row-reverse	row-reverse	flex-wrap	wrap
		flex-col	column	flex-wrap-reverse	wrap-reverse
		flex-col-reverse	column-reverse

align-items	CSS	align-content	CSS	align-self	CSS	justify-content	CSS
items-stretch	stretch	content-start	flex-start	self-auto	auto	justify-start	flex-start
items-start	flex-start	content-center	center	self-start	flex-start	justify-center	center
items-center	center	content-end	flex-end	self-center	center	justify-end	flex-end
items-end	flex-end	content-between	space-between	self-end	flex-end	justify-between	space-between
items-baseline	baseline	content-around	space-around	self-stretch	stretch	justify-around	space-around

flex	CSS	flex-grow	CSS	flex-shrink	CSS
flex-initial	flex: initial	flex-grow	flex-grow: 1	flex-shrink	flex-shrink: 1
flex-1	flex: 1	flex-no-grow	flex-grow: 0	flex-no-shrink	flex-shrink: 0
flex-auto	flex: auto
flex-none	flex: none

반응형 디자인

모바일 우선 중단점 시스템을 사용

중단점	너비	CSS
sm	640px	@media (min-width: 640px) { ... }
md	786px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

테마 사용자 정의

module.exports = {
  theme: {
  screens: {
    sm: '480px',
    md: '768px',
    lg: '976px',
    xl: '1440px'
  },
  colors: {
    'blue': '#1fb6ff',
    'pink': '#ff49db',
    'orange': '#ff7849',
    'green': '#13ce66',
    'gray-dark': '#273444',
    'gray': '#8492a6',
    'gray-light': '#d3dce6'
  },
  fontFamily: {
    sans: [
     'Graphik', 'sans-serif'
    ],
    serif: ['Merriweather', 'serif']
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem'
      },
      borderRadius: {
        '4xl': '2rem'
      }
    }
  }
}

임의의 값

<div class="margin-[58px] bg-[#bada55]"></div>

임의의 속성

<div class="[mask-type:luminance]"></div>

@

• @tailwind: CSS에 Tailwind의 기본, 추가, 유틸리티 및 변형 스타일을 삽입하는 데 사용
• @layer: hover:, focus:, md:, lg: 와 같은 수정자 적용
• @apply: 사용자 정의 클래스에 Tailwind의 클래스를 삽입할 때 사용