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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index e44d1399d2a8d7938ae404f71830eee48214f8d3..8a57f214d760b7217c00a72cf10329e3bdfef2ac 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -22,6 +22,7 @@ import { getDocumentSettings } from '../util/getDocumentSettings'
import { isJsContext } from '../util/js'
import { naturalExpand } from '../util/naturalExpand'
import semver from 'semver'
+import { docsUrl } from '../util/docsUrl'
function completionsFromClassList(
state: State,
@@ -337,40 +338,50 @@ ? {
label: 'base',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'This injects Tailwind’s base styles and any base styles registered by plugins.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives/#tailwind)',
+ value: `This injects Tailwind’s base styles and any base styles registered by plugins.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#tailwind'
+ )})`,
},
}
: {
label: 'preflight',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'This injects Tailwind’s base styles, which is a combination of Normalize.css and some additional base styles.\n\n[Tailwind CSS Documentation](https://v0.tailwindcss.com/docs/functions-and-directives/#tailwind)',
+ value: `This injects Tailwind’s base styles, which is a combination of Normalize.css and some additional base styles.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#tailwind'
+ )})`,
},
},
{
label: 'components',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'This injects Tailwind’s component classes and any component classes registered by plugins.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives/#tailwind)',
+ value: `This injects Tailwind’s component classes and any component classes registered by plugins.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#tailwind'
+ )})`,
},
},
{
label: 'utilities',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'This injects Tailwind’s utility classes and any utility classes registered by plugins.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives/#tailwind)',
+ value: `This injects Tailwind’s utility classes and any utility classes registered by plugins.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#tailwind'
+ )})`,
},
},
{
label: 'screens',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'Use this directive to control where Tailwind injects the responsive variations of each utility.\n\nIf omitted, Tailwind will append these classes to the very end of your stylesheet by default.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives/#tailwind)',
+ value: `Use this directive to control where Tailwind injects the responsive variations of each utility.\n\nIf omitted, Tailwind will append these classes to the very end of your stylesheet by default.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#tailwind'
+ )})`,
},
},
].map((item) => ({
@@ -511,40 +522,50 @@ {
label: '@tailwind',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'Use the `@tailwind` directive to insert Tailwind’s `base`, `components`, `utilities` and `screens` styles into your CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#tailwind)',
+ value: `Use the \`@tailwind\` directive to insert Tailwind’s \`base\`, \`components\`, \`utilities\` and \`screens\` styles into your CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#tailwind'
+ )})`,
},
},
{
label: '@variants',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'You can generate `responsive`, `hover`, `focus`, `active`, and `group-hover` versions of your own utilities by wrapping their definitions in the `@variants` directive.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#variants)',
+ value: `You can generate \`responsive\`, \`hover\`, \`focus\`, \`active\`, and \`group-hover\` versions of your own utilities by wrapping their definitions in the \`@variants\` directive.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#variants'
+ )})`,
},
},
{
label: '@responsive',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#responsive)',
+ value: `You can generate responsive variants of your own classes by wrapping their definitions in the \`@responsive\` directive.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#responsive'
+ )})`,
},
},
{
label: '@screen',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'The `@screen` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#screen)',
+ value: `The \`@screen\` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#screen'
+ )})`,
},
},
{
label: '@apply',
documentation: {
kind: MarkupKind.Markdown,
- value:
- 'Use `@apply` to inline any existing utility classes into your own custom CSS.\n\n[Tailwind CSS Documentation](https://tailwindcss.com/docs/functions-and-directives#apply)',
+ value: `Use \`@apply\` to inline any existing utility classes into your own custom CSS.\n\n[Tailwind CSS Documentation](${docsUrl(
+ state.version,
+ 'functions-and-directives/#apply'
+ )})`,
},
},
]
|