Tailwind CSS 사용자 지정 글꼴 사용 예
6222 단어 webdevcsstutorialtailwindcss
view
예 1
@import 메서드를 사용하여 CSS에 사용자 지정 글꼴을 추가합니다. Tailwind directives 파일에 google font css url을 추가해야 합니다.
src/input.css 또는 main.css 또는 tailwind.css
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
다음으로 tailwind.config.js에 fontfamily를 추가해야 합니다.
tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'culpa': ['"Mea Culpa"', 'cursive']
}
},
},
plugins: [],
}
Index.html
<div class="container mx-auto">
<h1 class="text-4xl font-culpa">Tailwind CSS 3</h1>
</div>
예 2
링크 방법을 사용하여 html 파일에 사용자 지정 글꼴을 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Google Fonts</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap" rel="stylesheet">s
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
'culpa': ['"Mea Culpa"', 'cursive']
}
}
}
}
</script>
</head>
<body>
<div class="container m-12 mx-auto">
<h1 class="text-6xl font-culpa">Tailwind CSS 3</h1>
</div>
</body>
</html>
Reference
이 문제에 관하여(Tailwind CSS 사용자 지정 글꼴 사용 예), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/larainfo/tailwind-css-use-custom-fonts-example-239k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)