Skip to content

Commit 4f7c021

Browse files
Upgrade to Tailwind v4 (#2425)
1 parent 1cc8904 commit 4f7c021

28 files changed

Lines changed: 3341 additions & 3252 deletions

.vscode/settings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,6 @@
1515
},
1616
"[typescript]": {
1717
"editor.defaultFormatter": "denoland.vscode-deno"
18-
}
18+
},
19+
"css.customData": [".vscode/tailwind.json"]
1920
}

.vscode/tailwind.json

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
{
2+
"version": 1.2,
3+
"atDirectives": [
4+
{
5+
"name": "@theme",
6+
"description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
7+
"references": [
8+
{
9+
"name": "Tailwind Documentation",
10+
"url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
11+
}
12+
]
13+
},
14+
{
15+
"name": "@source",
16+
"description": "Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection.",
17+
"references": [
18+
{
19+
"name": "Tailwind Documentation",
20+
"url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
21+
}
22+
]
23+
},
24+
{
25+
"name": "@utility",
26+
"description": "Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`.",
27+
"references": [
28+
{
29+
"name": "Tailwind Documentation",
30+
"url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
31+
}
32+
]
33+
},
34+
{
35+
"name": "@variant",
36+
"description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS.",
37+
"references": [
38+
{
39+
"name": "Tailwind Documentation",
40+
"url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
41+
}
42+
]
43+
},
44+
{
45+
"name": "@custom-variant",
46+
"description": "Use the `@custom-variant` directive to add a custom variant in your project.",
47+
"references": [
48+
{
49+
"name": "Tailwind Documentation",
50+
"url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
51+
}
52+
]
53+
},
54+
{
55+
"name": "@apply",
56+
"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS.",
57+
"references": [
58+
{
59+
"name": "Tailwind Documentation",
60+
"url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
61+
}
62+
]
63+
},
64+
{
65+
"name": "@reference",
66+
"description": "If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.\n\nTo do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles.",
67+
"references": [
68+
{
69+
"name": "Tailwind Documentation",
70+
"url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
71+
}
72+
]
73+
},
74+
{
75+
"name": "@config",
76+
"description": "Use the `@config` directive to load a legacy JavaScript-based configuration file.",
77+
"references": [
78+
{
79+
"name": "Tailwind Documentation",
80+
"url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
81+
}
82+
]
83+
},
84+
{
85+
"name": "@plugin",
86+
"description": "Use the `@plugin` directive to load a legacy JavaScript-based plugin.",
87+
"references": [
88+
{
89+
"name": "Tailwind Documentation",
90+
"url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
91+
}
92+
]
93+
}
94+
]
95+
}

_components/Base.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ export default function Base(
77
return (
88
<>
99
<div className="ddoc markdown-body">
10-
<link rel="stylesheet" href="/reference_styles.css" />
1110
<comp.Breadcrumbs parts={data.breadcrumbs_ctx.parts} />
1211
<main id="content" tabindex={-1}>
1312
{children}

_components/Feedback.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export default function Feedback({ file }: { file: string | undefined }) {
103103
</p>
104104
<div class="space-y-1">
105105
<textarea
106-
class="block w-full p-2 border border-foreground-tertiary dark:bg-background-primary rounded"
106+
class="block w-full p-2 border border-foreground-tertiary bg-white dark:bg-background-primary rounded"
107107
name="feedback-comment"
108108
id="feedback-comment"
109109
placeholder="Your feedback will be posted as an issue in the denoland/docs GitHub repo"
@@ -116,7 +116,7 @@ export default function Feedback({ file }: { file: string | undefined }) {
116116
</label>
117117
<input
118118
type="text"
119-
class="block w-full p-2 border border-foreground-tertiary dark:bg-background-primary rounded"
119+
class="block w-full p-2 border border-foreground-tertiary bg-white dark:bg-background-primary rounded"
120120
name="feedback-contact"
121121
id="feedback-contact"
122122
aria-invalid="false"
@@ -130,7 +130,7 @@ export default function Feedback({ file }: { file: string | undefined }) {
130130
</div>
131131
<button
132132
type="submit"
133-
class="btn bg-green-400 dark:bg-green-600 mt-4"
133+
class="btn mt-4"
134134
>
135135
Send us feedback
136136
</button>

_components/SearchInput.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function SearchInput() {
1414
placeholder="Search"
1515
className="w-full min-w-24 rounded-lg text-sm leading-normal pt-1 pr-3 pb-1 pl-8 border transition-all duration-150
1616
text-foreground-primary border-foreground-tertiary hover:bg-background-secondary focus:bg-background-secondary"
17-
style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1em; background-color: hsl(var(--foreground-quaternary));"
17+
style="background: url(/img/search.svg) no-repeat 0.5em 50%; background-size: 1em; background-color: var(--color-foreground-quaternary);"
1818
/>
1919
<input type="hidden" name="q" id="q" value="site:deno.com" />
2020
</form>

_components/SidebarNav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export default function (data: Lume.Data) {
9696
function SidebarList(props: { children: Element; className?: string }) {
9797
return (
9898
<ul
99-
className={`p-0 m-0 list-none overflow-y-hidden ${props.className ?? ""}`}
99+
className={`p-0 list-none overflow-y-hidden ${props.className ?? ""}`}
100100
>
101101
{props.children}
102102
</ul>

_components/VideoPlayer.css

Lines changed: 0 additions & 101 deletions
This file was deleted.

_components/VideoPlayer.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
export const css = "@import './_components/VideoPlayer.css';";
2-
31
/**
42
* Embed a YouTube video.
53
* @param props.id - The YouTube ID or URL.

_config.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ import redirects from "lume/plugins/redirects.ts";
1010
import search from "lume/plugins/search.ts";
1111
import sitemap from "lume/plugins/sitemap.ts";
1212

13-
import tw from "tailwindcss";
14-
import tailwindConfig from "./tailwind.config.js";
13+
import tailwind from "@tailwindcss/postcss";
1514

1615
import Prism from "./prism.ts";
1716

1817
import title from "https://deno.land/x/lume_markdown_plugins@v0.7.0/title.ts";
1918
import toc from "https://deno.land/x/lume_markdown_plugins@v0.7.0/toc.ts";
20-
import { CSS as GFM_CSS } from "https://jsr.io/@deno/gfm/0.8.2/style.ts";
19+
// See note below about GFM CSS
20+
// import { CSS as GFM_CSS } from "https://jsr.io/@deno/gfm/0.11.0/style.ts";
2121
import { log } from "lume/core/utils/log.ts";
2222
import anchor from "npm:markdown-it-anchor@9";
2323
import admonitionPlugin from "./markdown-it/admonition.ts";
@@ -133,7 +133,8 @@ site.use(mdx());
133133

134134
site.use(
135135
postcss({
136-
plugins: [tw(tailwindConfig)],
136+
includes: false,
137+
plugins: [tailwind()],
137138
}),
138139
);
139140

@@ -153,7 +154,8 @@ site.use(sitemap());
153154

154155
site.addEventListener("afterBuild", async () => {
155156
// Write GFM CSS
156-
Deno.writeTextFileSync(site.dest("gfm.css"), GFM_CSS);
157+
/* NOTE: we used to get gfm.css from the jsr.io CDN, but now we simply have a local copy. This is because it needs to be placed on a CSS layer, which isn't possible with an imported file. */
158+
// Deno.writeTextFileSync(site.dest("gfm.css"), GFM_CSS);
157159

158160
// Generate LLMs documentation files directly to _site directory
159161
if (Deno.env.get("BUILD_TYPE") == "FULL") {

_includes/layout.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,7 @@ export default function Layout(data: Lume.Data) {
2727
'light'); document.documentElement.classList.add(theme);
2828
</script>
2929

30-
<link rel="stylesheet" href="/gfm.css" />
3130
<link rel="stylesheet" href="/styles.css" />
32-
<link rel="stylesheet" href="/components.css" />
33-
<link rel="stylesheet" href="/overrides.css" />
3431
<link
3532
rel="preload"
3633
href="/fonts/inter/Inter-Regular.woff2"

0 commit comments

Comments
 (0)