diff --git a/packages/tailwindcss-class-names/src/getVariants.js b/packages/tailwindcss-class-names/src/getVariants.js
index 21cd1f331252668c66c9d6aecd9faa1332f3fce1..0e3517b3c880f107cb70650027fb7f4fb4c28104 100644
--- a/packages/tailwindcss-class-names/src/getVariants.js
+++ b/packages/tailwindcss-class-names/src/getVariants.js
@@ -6,6 +6,7 @@   let variants = ['responsive', 'hover']
   semver.gte(version, '0.3.0') && variants.push('focus', 'group-hover')
   semver.gte(version, '0.5.0') && variants.push('active')
   semver.gte(version, '0.7.0') && variants.push('focus-within')
+  semver.gte(version, '1.0.0-beta.1') && variants.push('default')
   semver.gte(version, '1.1.0') &&
     variants.push('first', 'last', 'odd', 'even', 'disabled', 'visited')
 
@@ -13,24 +14,25 @@   let plugins = config.plugins
   if (!Array.isArray(plugins)) {
     plugins = []
   }
-  plugins.forEach(plugin => {
+  plugins.forEach((plugin) => {
     try {
       ;(plugin.handler || plugin)({
         addUtilities: () => {},
         addComponents: () => {},
         addBase: () => {},
-        addVariant: name => {
+        addVariant: (name) => {
           variants.push(name)
         },
-import dlv from 'dlv'
 export default function getVariants({ config, version, postcss }) {
+import semver from 'semver'
+export default function getVariants({ config, version, postcss }) {
 import dlv from 'dlv'
-  let variants = ['responsive', 'hover']
         theme: (path, defaultValue) =>
           dlv(config, `theme.${path}`, defaultValue),
         variants: () => [],
         config: (path, defaultValue) => dlv(config, path, defaultValue),
+export default function getVariants({ config, version, postcss }) {
 
       })
     } catch (_) {
       console.error(_)

diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index f8815da0d320b56ab9fea3f76623e06b243ffe09..84c54c72463959fc711571a6c0c08b6845058f4f 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -286,6 +286,79 @@     }),
   }
 }
 
+function provideVariantsDirectiveCompletions(
+  state: State,
+  { position, textDocument }: CompletionParams
+): CompletionList {
+  let doc = state.editor.documents.get(textDocument.uri)
+
+  if (!isCssContext(doc, position)) {
+    return null
+  }
+
+  let text = doc.getText({
+    start: { line: position.line, character: 0 },
+    end: position,
+  })
+
+  const match = text.match(/^\s*@variants\s+(?<partial>[^}]*)$/i)
+
+  if (match === null) return null
+
+  const parts = match.groups.partial.split(/\s*,\s*/)
+
+  if (/\s+/.test(parts[parts.length - 1])) return null
+
+  // TODO: move this to tailwindcss-class-names?
+  let variants = dlv(
+    state.config,
+    ['variants'],
+    dlv(state.config, ['modules'], {})
+  )
+  if (!isObject(variants) && !Array.isArray(variants)) {
+    variants = []
+  }
+  let enabledVariants: string[]
+  if (Array.isArray(variants)) {
+    enabledVariants = variants
+  } else {
+    const uniqueVariants: Set<string> = new Set()
+    for (const mod in variants) {
+      if (!Array.isArray(variants[mod])) continue
+      variants[mod].forEach((v: string) => uniqueVariants.add(v))
+    }
+    enabledVariants = [...uniqueVariants]
+  }
+
+  enabledVariants = state.variants.filter(
+    (x) => enabledVariants.indexOf(x) !== -1 || x === 'default'
+  )
+
+  const existingVariants = parts.slice(0, parts.length - 1)
+
+  return {
+    isIncomplete: false,
+    items: enabledVariants
+      .filter((v) => existingVariants.indexOf(v) === -1)
+      .map((variant) => ({
+        // TODO: detail
+        label: variant,
+        kind: CompletionItemKind.Constant,
+        data: 'variant',
+        textEdit: {
+          newText: variant,
+          range: {
+            start: {
+              line: position.line,
+              character: position.character - parts[parts.length - 1].length,
+            },
+            end: position,
+          },
+        },
+      })),
+  }
+}
+
 function provideScreenDirectiveCompletions(
   state: State,
   { position, textDocument }: CompletionParams
@@ -424,7 +497,8 @@   return (
     provideClassNameCompletions(state, params) ||
     provideCssHelperCompletions(state, params) ||
     provideCssDirectiveCompletions(state, params) ||
-    provideScreenDirectiveCompletions(state, params)
+    provideScreenDirectiveCompletions(state, params) ||
+    provideVariantsDirectiveCompletions(state, params)
   )
 }
 
@@ -432,8 +506,12 @@ export function resolveCompletionItem(
   state: State,
   item: CompletionItem
 ): CompletionItem {
+  CompletionItem,
 import {
-  CompletionParams,
+    item.data === 'helper' ||
+    item.data === 'directive' ||
+    item.data === 'variant'
+  ) {
     return item
   }