Skip to content

Commit beede93

Browse files
junzyxjunzyx
committed
tailwind and custom font docs
1 parent 1a57d3f commit beede93

File tree

3 files changed

+62
-65
lines changed

3 files changed

+62
-65
lines changed

‎apps/docs/mint.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@
5959
"pages": [
6060
"usage/static-content",
6161
"usage/template-variables",
62+
"usage/custom-fonts",
63+
"usage/tailwind",
6264
"usage/publishing-to-the-cloud"
6365
]
6466
},

‎apps/docs/usage/custom-fonts.mdx‎

Lines changed: 1 addition & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
11
---
22
title: "Custom Fonts"
3-
description: "Learn how to use custom fonts in your document templates, including Google Fonts and local fonts"
43
icon: "font"
54
---
65

7-
# Custom Fonts
8-
9-
You can enhance your document templates with custom fonts, either from Google Fonts or by using local font files. This guide covers both approaches.
10-
116
## Using Google Fonts
127

13-
To use Google Fonts in your documents, import them in your document's `<Head>` component:
8+
To use [Google Fonts](https://fonts.google.com/) in your documents, import them in your document's `<Head>` component:
149

1510
```tsx
1611
import { Document, Head } from "@htmldocs/react"
@@ -67,62 +62,3 @@ function MyDocument() {
6762
)
6863
}
6964
```
70-
71-
## Best Practices
72-
73-
1. **Font Loading Performance**
74-
- For Google Fonts, use the `&display=swap` parameter to prevent font rendering blocking
75-
- For local fonts, use `font-display: swap` in your `@font-face` declaration
76-
- Include only the font weights you need to minimize loading time
77-
78-
2. **File Formats**
79-
- For maximum browser compatibility, provide both WOFF2 and WOFF formats
80-
- WOFF2 offers better compression and should be listed first in the `src` property
81-
82-
3. **Font Fallbacks**
83-
- Always include fallback fonts in your `fontFamily` style
84-
- Example: `fontFamily: 'CustomFont, system-ui, sans-serif'`
85-
86-
## Example with Multiple Font Weights
87-
88-
Here's an example using a custom font with multiple weights:
89-
90-
```tsx
91-
import { Document, Head } from "@htmldocs/react"
92-
93-
function MyDocument() {
94-
return (
95-
<Document>
96-
<Head>
97-
<style>
98-
{`
99-
@font-face {
100-
font-family: 'CustomFont';
101-
src: url('/static/fonts/CustomFont-Regular.woff2') format('woff2');
102-
font-weight: 400;
103-
font-style: normal;
104-
font-display: swap;
105-
}
106-
107-
@font-face {
108-
font-family: 'CustomFont';
109-
src: url('/static/fonts/CustomFont-Bold.woff2') format('woff2');
110-
font-weight: 700;
111-
font-style: normal;
112-
font-display: swap;
113-
}
114-
`}
115-
</style>
116-
</Head>
117-
<div>
118-
<p style={{ fontFamily: 'CustomFont', fontWeight: 400 }}>
119-
Regular text using custom font
120-
</p>
121-
<p style={{ fontFamily: 'CustomFont', fontWeight: 700 }}>
122-
Bold text using custom font
123-
</p>
124-
</div>
125-
</Document>
126-
)
127-
}
128-
```

‎apps/docs/usage/tailwind.mdx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: 'Using Tailwind CSS'
3+
description: 'Learn how to use Tailwind CSS in your htmldocs documents'
4+
icon: 'wind'
5+
---
6+
7+
htmldocs comes with Tailwind CSS v3.4.3 bundled by default. The `@tailwindcss/typography` plugin (v0.5.9) is included by default. The default examples use Tailwind classes.
8+
9+
## Customizing Tailwind
10+
11+
Your project includes a `tailwind.config.js` file that you can customize. The default configuration is optimized for document generation:
12+
13+
```js
14+
module.exports = {
15+
content: ["./documents/**/*.{js,jsx,ts,tsx}"],
16+
theme: {
17+
extend: {
18+
fontFamily: {
19+
serif: ['Palatino', 'Palatino Linotype', 'serif'],
20+
},
21+
typography: {
22+
DEFAULT: {
23+
css: {
24+
fontSize: '12pt',
25+
lineHeight: 1.5,
26+
color: '#000000',
27+
}
28+
}
29+
}
30+
}
31+
},
32+
plugins: [
33+
require('@tailwindcss/typography'),
34+
],
35+
};
36+
```
37+
38+
## Usage
39+
40+
Use Tailwind classes in your document templates.
41+
42+
```tsx
43+
import { Document, Page } from 'htmldocs';
44+
45+
export default function Resume() {
46+
return (
47+
<Document>
48+
<Page className="bg-white p-8">
49+
<div className="prose">
50+
<h1>John Doe</h1>
51+
<p>Professional software engineer</p>
52+
</div>
53+
</Page>
54+
</Document>
55+
);
56+
}
57+
```
58+
59+
The `prose` class from `@tailwindcss/typography` is recommended for content-heavy sections.

0 commit comments

Comments
 (0)