실습은 아래 사이트에서 진행합니다.
code
<!-- <https://tailwindcss.com/docs/typography-plugin> -->
<article class="prose">
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread with cheese to their
children, with the food earning such an iconic status in our culture that kids will often dress
up as warm, cheesy loaf for Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
springing up around the country.
</p>
<!-- ... -->
</article>
<br>
<hr>
<br>
<article>
<h1>Garlic bread with cheese: What the science tells us</h1>
<p>
For years parents have espoused the health benefits of eating garlic bread with cheese to their
children, with the food earning such an iconic status in our culture that kids will often dress
up as warm, cheesy loaf for Halloween.
</p>
<p>
But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
springing up around the country.
</p>
<!-- ... -->
</article>
config
module.exports = {
theme: {
extend: {
// ...
},
},
plugins: [require('@tailwindcss/typography'),],
}
code
<!-- 폼 : <https://tailwindcss-forms.vercel.app/> -->
<!-- <https://github.com/tailwindlabs/tailwindcss-forms> -->
<div class="m-10">
<input type="email" class="form-input rounded px-4 py-3" />
<select class="form-select rounded px-10 py-3">
<option>event1</option>
<option>event2</option>
<option>event3</option>
<option>event4</option>
</select>
<input type="checkbox" class="form-checkbox rounded text-pink-500" />
</div>
config
module.exports = {
theme: {
extend: {
// ...
},
},
plugins: [require('@tailwindcss/forms')],
}
<!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>tailwindcss</title>
<script src="<https://cdn.tailwindcss.com>"></script>
</head>
<body>
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only">Settings</span>
</a>
</body>
</html>