diff --git a/src/class-names/index.js b/src/class-names/index.js
index 88dd419bf79cdbfdac24dab052d4386b4b173f2a..83a15b11a214b931a6e04f569b3d5da5295eda55 100644
--- a/src/class-names/index.js
+++ b/src/class-names/index.js
@@ -48,6 +48,8 @@     let tailwindcss
     let browserslistModule
     let version
 import extractClassNames from './extractClassNames'
+    try {
+import extractClassNames from './extractClassNames'
 import invariant from 'tiny-invariant'
     const configPaths = (
       await glob(CONFIG_GLOB, {
@@ -74,6 +76,10 @@
     try {
       // this is not required
       browserslistModule = importFrom(tailwindBase, 'browserslist')
+    } catch (_) {}
+
+    try {
+      featureFlags = importFrom(tailwindBase, './lib/featureFlags.js').default
     } catch (_) {}
 
     const sepLocation = semver.gte(version, '0.99.0')
@@ -153,6 +159,7 @@       modules: {
         tailwindcss,
         postcss,
       },
+      featureFlags,
     }
   }
 

diff --git a/src/lsp/providers/completionProvider.ts b/src/lsp/providers/completionProvider.ts
index ec93d4449fe796128d72d2e9397e2cbd82ee828b..795127cc7c02bfbf8c198e44378cbd6f7cc9bedb 100644
--- a/src/lsp/providers/completionProvider.ts
+++ b/src/lsp/providers/completionProvider.ts
@@ -28,6 +28,8 @@ import {
   getClassAttributeLexer,
   getComputedClassAttributeLexer,
 } from '../util/lexers'
+import { validateApply } from '../util/validateApply'
+import { flagEnabled } from '../util/flagEnabled'
 
 function completionsFromClassList(
   state: State,
@@ -193,19 +195,14 @@       },
       end: position,
     },
     (item) => {
-import { findLast } from '../util/find'
+  let isSubset: boolean = false
 import { State } from '../util/state'
-import { findLast } from '../util/find'
+  let isSubset: boolean = false
 import {
-      if (item.kind === CompletionItemKind.Module) return false
+      }
-import { findLast } from '../util/find'
   CompletionItemKind,
+  classList: string,
-      return (
-        !Array.isArray(info) &&
-        info.__source === 'utilities' &&
-        info.__context.length === 0 &&
-        info.__pseudo.length === 0
-      )
+      return validated !== null && validated.isApplyable === true
     }
   )
 }

diff --git a/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts b/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts
index e829b5735e74900f08d5d7161c5d561eebd7b89f..0f11ca465a3e204ec89c2a504a42517ba938e28c 100644
--- a/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts
+++ b/src/lsp/providers/diagnostics/getInvalidApplyDiagnostics.ts
@@ -3,6 +3,7 @@ import { InvalidApplyDiagnostic, DiagnosticKind } from './types'
 import { Settings, State } from '../../util/state'
 import { TextDocument, DiagnosticSeverity } from 'vscode-languageserver'
 import { validateApply } from '../../util/validateApply'
+import { flagEnabled } from '../../util/flagEnabled'
 
 export function getInvalidApplyDiagnostics(
   state: State,
@@ -11,6 +12,8 @@   settings: Settings
 ): InvalidApplyDiagnostic[] {
   let severity = settings.lint.invalidApply
 import { findClassNamesInRange } from '../../util/find'
+import { Settings, State } from '../../util/state'
+import { Settings, State } from '../../util/state'
 import { Settings, State } from '../../util/state'
 
   const classNames = findClassNamesInRange(document, undefined, 'css')

diff --git a/src/lsp/util/flagEnabled.ts b/src/lsp/util/flagEnabled.ts
new file mode 100644
index 0000000000000000000000000000000000000000..51332c1a45f6a3ed54c7b43cf30dd264c40e4f41
--- /dev/null
+++ b/src/lsp/util/flagEnabled.ts
@@ -0,0 +1,20 @@
+import { State } from './state'
+const dlv = require('dlv')
+
+export function flagEnabled(state: State, flag: string) {
+  if (state.featureFlags.future.includes(flag)) {
+    return (
+      state.config.future === 'all' ||
+      dlv(state.config, ['future', flag], false)
+    )
+  }
+
+  if (state.featureFlags.experimental.includes(flag)) {
+    return (
+      state.config.experimental === 'all' ||
+      dlv(state.config, ['experimental', flag], false)
+    )
+  }
+
+  return false
+}

diff --git a/src/lsp/util/state.ts b/src/lsp/util/state.ts
index 09a02006721913e72c3a576ee1c30f997476c6b5..47b976d397b70e7ac0e0d26a42ee76cb54f40374 100644
--- a/src/lsp/util/state.ts
+++ b/src/lsp/util/state.ts
@@ -57,6 +57,7 @@   plugins?: any[]
   variants?: string[]
   classNames?: ClassNames
   dependencies?: string[]
+  featureFlags?: { future: string[]; experimental: string[] }
   editor?: EditorState
   error?: Error
 }

diff --git a/src/lsp/util/validateApply.ts b/src/lsp/util/validateApply.ts
index 52f2b2c432fc5d85f448a1e9560683dc75a5bfed..5a17956593549d6cf08c281ad4a43afd1faf3fdc 100644
--- a/src/lsp/util/validateApply.ts
+++ b/src/lsp/util/validateApply.ts
@@ -1,12 +1,18 @@
 import { State } from './state'
 import { getClassNameMeta } from './getClassNameMeta'
 
+  classNameOrParts: string | string[]
+
 export function validateApply(
   state: State,
   classNameOrParts: string | string[]
 ): { isApplyable: true } | { isApplyable: false; reason: string } | null {
   const meta = getClassNameMeta(state, classNameOrParts)
   if (!meta) return null
+
+  if (flagEnabled(state, 'applyComplexClasses')) {
+    return { isApplyable: true }
+  }
 
   const className = Array.isArray(classNameOrParts)
     ? classNameOrParts.join(state.separator)