‘HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트’
말 그대로 CSS 문서로 가지 않고 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만드는 것이 Tailwind의 목표라고 할 수 있다.
이것을 실현하기 위한 기법이 utility-first! 미리 구현된 CSS를 사용하는것!
🌟 장점
1. 오직 HTML 문서만 보면 된다. 공식문서도 그렇게 만들어져 있다!
2. 클래스 이름을 고민할 필요가 없고, 협업에 있어서도 문제가 없다!
3. 유지보수에 용이하다!
🌟 사용법
CDN 링크 : https://tailwindcss.com/docs/installation/play-cdn
🌟 유용한 정보
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- 마크다운 -->
<!-- https://tailwindcss.com/docs/typography-plugin -->
<article class="prose lg:prose-xl">
{{ markdown }}
</article>
<!-- 폼 -->
<!-- https://github.com/tailwindlabs/tailwindcss-forms -->
<input type="email" class="form-input px-4 py-3 rounded-full">
<select class="form-select px-4 py-3 rounded-full">
<!-- ... -->
</select>
<input type="checkbox" class="form-checkbox rounded text-pink-500" />
</body>
</html>
프론트엔드 개발자 항상 뭘 하고있는 슬링