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,58 +338,64 @@         ? {
             label: 'base',
             documentation: {
               kind: MarkupKind.Markdown,
-import { isJsContext } from '../util/js'
+  let replacementRange = {
   CompletionList,
-import { isJsContext } from '../util/js'
+  let replacementRange = {
 } from 'vscode-languageserver'
+                'functions-and-directives/#tailwind'
+              )})`,
             },
           }
         : {
             label: 'preflight',
             documentation: {
               kind: MarkupKind.Markdown,
+    ...classListRange,
 import {
-import {
+  CompletionItem,
   CompletionList,
+} from 'vscode-languageserver'
-import {
+                'functions-and-directives/#tailwind'
   CompletionItem,
-import {
+          textEdit: {
             },
           },
       {
         label: 'components',
         documentation: {
           kind: MarkupKind.Markdown,
-import {
   CompletionItem,
-  MarkupKind,
+            range: replacementRange,
-import {
   CompletionItem,
-  CompletionList,
+          },
+            'functions-and-directives/#tailwind'
+          )})`,
         },
       },
       {
         label: 'utilities',
         documentation: {
           kind: MarkupKind.Markdown,
-import {
   CompletionItem,
+} from 'vscode-languageserver'
   MarkupKind,
-import {
+    ...classListRange,
   CompletionItemKind,
-import { State } from '../util/state'
+            'functions-and-directives/#tailwind'
+          )})`,
         },
       },
       {
         label: 'screens',
         documentation: {
           kind: MarkupKind.Markdown,
-import {
   CompletionItem,
-  MarkupKind,
+  { context, position, textDocument }: CompletionParams
-import {
+    ...classListRange,
   CompletionItemKind,
   CompletionItem,
+    ),
+          )})`,
         },
       },
     ].map((item) => ({
@@ -529,10 +535,13 @@     {
       label: '@tailwind',
       documentation: {
         kind: MarkupKind.Markdown,
-import {
+  CompletionItem,
 } from 'vscode-languageserver'
+} from 'vscode-languageserver'
+          state.version,
+    start: {
 import { State } from '../util/state'
-  classListRange: Range
+    start: {
 import {
       },
     },
@@ -540,37 +549,44 @@     {
       label: '@variants',
       documentation: {
         kind: MarkupKind.Markdown,
-        value:
+        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'
+    start: {
 import {
-          },
       },
     },
     {
       label: '@responsive',
       documentation: {
         kind: MarkupKind.Markdown,
-        value:
+        value: `You can generate responsive variants of your own classes by wrapping their definitions in the \`@responsive\` directive.\n\n[Tailwind CSS Documentation](${docsUrl(
-  classListRange: Range
+          state.version,
+    start: {
   Range,
+        )})`,
       },
     },
     {
       label: '@screen',
       documentation: {
         kind: MarkupKind.Markdown,
-        value:
+        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'
+    start: {
 import {
-  { context, position, textDocument }: CompletionParams
       },
     },
     {
       label: '@apply',
       documentation: {
         kind: MarkupKind.Markdown,
-import {
+    start: {
 } from 'vscode-languageserver'
-import { State } from '../util/state'
-  CompletionItem,
+  CompletionItemKind,
+          'functions-and-directives/#apply'
+        )})`,
       },
     },
   ]

diff --git a/packages/tailwindcss-language-server/src/util/docsUrl.ts b/packages/tailwindcss-language-server/src/util/docsUrl.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c8b25a1e2583d04dcb7c4fd56730ae2c8c11f3e4
--- /dev/null
+++ b/packages/tailwindcss-language-server/src/util/docsUrl.ts
@@ -0,0 +1,14 @@
+import semver from 'semver'
+
+export function docsUrl(version: string, paths: string | string[]): string {
+  let major = 0
+  let url = 'https://v0.tailwindcss.com/docs/'
+  if (semver.gte(version, '0.99.0')) {
+    major = 1
+    url = 'https://tailwindcss.com/docs/'
+  }
+  const path = Array.isArray(paths)
+    ? paths[major] || paths[paths.length - 1]
+    : paths
+  return `${url}${path}`
+}