본문으로 바로가기

Tailwind CSS 소개

category CSS/Tailwind CSS 2022. 5. 4. 18:07

Tailwind CSS란?

https://tailwindcss.com/

 

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

Documentation for the Tailwind CSS framework.

tailwindcss.com

'HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트'

CSS 문서로 가지 않고 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만드는 것이 Tailwind의 목표

이것을 실현하기 위한 기법이 utility-first이다. (미리 구현된 CSS를 사용하는 것)

 

카카오엔터테이먼트를 비롯한 여러 기업들이 Tailwind를 도입했다고 발표한 바 있다.

어떠한 점이 만족도를 높게 할까요?

1. 오직 HTML 문서만 보면 된다. 공식문서도 그렇게 만들어져 있다!

2. 클래스 이름을 고민할 필요가 없고, 협업에 있어서도 문제가 없다!

3. 유지보수에 용이하다!

 

유료 컴포넌트

https://tailwindui.com/

 

Tailwind UI

Beautiful UI components by the creators of Tailwind CSS.

tailwindui.com

tailwindui에서는 컴포넌트를 사용할 수 있도록 UI를 제공합니다.

월 정액으로 사용할 수 있습니다.

 

공식 유튜브 채널

https://www.youtube.com/c/TailwindLabs

 

Tailwind Labs

We're a small team of developers and designers spread out all across the world, building tools that help other developers build better user interfaces. We created Tailwind CSS, Headless UI, Hero Patterns, Heroicons, and wrote Refactoring UI.

www.youtube.com

각 종 튜토리얼을 볼 수 있습니다.

 

Visual Studio Code Extension

Tailwind CSS IntelliSense

 - 자동완성이 잘 작동하지 않는 이슈가 있습니다. 만약 잘 작동하지 않는다면 아래 언급된 HTML CSS Support 를 설치해주세요.

 

HTML CSS Support

HTML CSS Support로 자동완성 가능합니다.

 

 

참고: 제주코딩베이스캠프

반응형

'CSS > Tailwind CSS' 카테고리의 다른 글

Tailwind CSS Animation  (0) 2022.05.06
Tailwind CSS Transitions  (0) 2022.05.06
Tailwind CSS Flexbox & Grid  (0) 2022.05.06
Tailwind CSS 기본 속성  (0) 2022.05.06
Tailwind CSS 기본 예제  (0) 2022.05.06