That's nice any easy, but lets setup our own config file, and we can
add a couple of other plugins to make things easier.
uno.config.ts
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| // uno.config.ts
import { defineConfig, presetAttributify, presetUno, presetTypography } from 'unocss'
import presetWebFonts from '@unocss/preset-web-fonts';
const fonts = presetWebFonts({
provider: 'google', // default provider
fonts: {
header: "Averia Serif Libre",
}
})
export default defineConfig({
presets: [
presetAttributify({ /* preset options */}),
presetUno(),
fonts,
presetTypography()
// ...custom presets
],
})
|
Then create package.json
as
1
2
3
4
5
6
7
8
9
10
| {
"scripts": {
"dev": "unocss \"site/**/*.html\" -o site/main.css --watch & live-server site",
"build": "unocss \"site/**/*.html\" -o site/main.css"
},
"devDependencies": {
"live-server": "^1.2.2",
"unocss": "^0.53.4"
}
}
|
And set it up and run
1
2
3
| curl -o site/reset.css https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css
npm i
npm run dev
|
Now we can replace
1
2
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>
|
with:
1
2
| <link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="main.css" />
|
That will give us:
site/inline.html
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Base Template</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="main.css" />
</head>
<body p-2 md:p-0 h-full>
<header max-w-screen-lg mx-auto md:flex justify-between py-4 font-header>
<h1 text-4xl md:inline-block>
Basic template
</h1>
<ul pt-2>
<li md:inline-block ml-4><a href="/basic.html">basic</a></li>
<li md:inline-block ml-4><a href="/inline.html">inline</a></li>
</ul>
</header>
<h2 max-w-screen-lg mx-auto font-bold text-2xl py-4>This is a page</h2>
<p max-w-screen-lg mx-auto>I really really like it</p>
</body>
</html>
|