홈페이지 레이아웃 예시

Tailwind의 경우 CSS를 약어를 이용하여 거의 그대로 사용하는 것과 다르지 않으므로, 폰트 사이즈, 레이아웃에 있어 디자이너/개발자가 자유롭게 조정 가능하다. 그러나 디자인에 있어서 일관성 또한 중요하므로, 회사 홈페이지에서는 아래와 같은 일관성을 가지도록 한다.

Typography

Heading1, 제목1

Heading1, 제목1

Heading1, 제목1

Heading1, 제목1

Heading1, 제목1
Heading1, 제목1

Text Size, Xl

text-6xl

text-5xl

text-4xl

text-3xl

text-2xl

text-xl


Text Size, lg-xs

text-lg

text-md

text-base

text-sm

text-xs

Docs 01

code

Sit amet cursus sit amet dictum sit amet mattis pellentesque id nibh tortor id, nulla aliquet porttitor lacus luctus accumsan tortor posuere. Pellentesque habitant morbi tristique senectus et netus, lacinia quis vel eros donec ac odio tempor. Duis ut diam quam nulla tellus orci ac auctor augue mauris augue.

Check out the Terms and license page to know more about our license.

Quick start

Customising settings

Orci ac auctor augue mauris augue neque gravida in sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis senectus et netus et malesuada fames ut faucibus pulvinar elementum integer pellentesque habitant morbi.

Docs 02

Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat auctor urna nunc id cursus metus aliquam eleifend, arcu dictum varius duis at consectetur lorem donec massa sapien, sed risus ultricies tristique nulla aliquet. Morbi tristique senectus et netus et, nibh nisl condimentum id venenatis a condimentum vitae sapien.

Learn more about Customising settings.

Folder content

Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat auctor urna nunc id cursus metus aliquam eleifend, arcu dictum varius duis at consectetur lorem donec massa sapien, sed risus ultricies tristique nulla aliquet. Morbi tristique senectus et netus et, nibh nisl condimentum id venenatis a condimentum vitae sapien.

Orci ac auctor augue mauris augue neque gravida in sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis senectus et netus et malesuada fames ut faucibus pulvinar elementum integer pellentesque habitant morbi.

For more information on what to do next, we recommend the following articles:

Was this page helpful?