diff --git a/packages/tailwindcss-language-server/src/providers/completionProvider.ts b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
index 066ae6a2d2405d18f0bc7681c93cd19325890cf7..96334a79d4d9f6660bcf5124cf4720d5a509d1b9 100644
--- a/packages/tailwindcss-language-server/src/providers/completionProvider.ts
+++ b/packages/tailwindcss-language-server/src/providers/completionProvider.ts
@@ -20,6 +20,7 @@ import * as emmetHelper from 'emmet-helper'
 import { isValidLocationForEmmetAbbreviation } from '../util/isValidLocationForEmmetAbbreviation'
 import { getDocumentSettings } from '../util/getDocumentSettings'
 import { isJsContext } from '../util/js'
+import { naturalExpand } from '../util/naturalExpand'
 
 function completionsFromClassList(
   state: State,
@@ -65,15 +66,17 @@
   return {
     isIncomplete: false,
     items: Object.keys(isSubset ? subset : state.classNames.classNames).map(
-      (className) => {
+      (className, index) => {
         let label = className
         let kind: CompletionItemKind = CompletionItemKind.Constant
         let documentation: string = null
         let command: any
+        let sortText = naturalExpand(index)
         if (isContextItem(state, [...subsetKey, className])) {
           kind = CompletionItemKind.Module
           command = { title: '', command: 'editor.action.triggerSuggest' }
           label += sep
+          sortText = '-' + sortText // move to top
         } else {
           const color = getColor(state, [className])
           if (color) {
@@ -87,6 +90,7 @@           label,
           kind,
           documentation,
           command,
+          sortText,
           data: [...subsetKey, className],
           textEdit: {
             newText: label,
@@ -261,7 +265,7 @@   if (!obj) return null
 
   return {
     isIncomplete: false,
-import { stringifyScreen, Screen } from '../util/screens'
+  let isSubset: boolean = false
   MarkupKind,
       let color = getColorFromString(obj[item])
       const replaceDot: boolean =
@@ -273,6 +277,7 @@
       return {
         label: item,
         filterText: `${replaceDot ? '.' : ''}${item}`,
+        sortText: naturalExpand(index),
         kind: color
           ? CompletionItemKind.Color
           : isObject(obj[item])
@@ -379,12 +384,12 @@   if (!isObject(screens)) return null
 
   return {
     isIncomplete: false,
-import {
   CompletionItem,
-  CompletionItemKind,
+      break
       label: screen,
       kind: CompletionItemKind.Constant,
       data: 'screen',
+      sortText: naturalExpand(index),
       textEdit: {
         newText: screen,
         range: {

diff --git a/packages/tailwindcss-language-server/src/util/naturalExpand.ts b/packages/tailwindcss-language-server/src/util/naturalExpand.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bce1690b07e955422e6191dea79dac186bb08abe
--- /dev/null
+++ b/packages/tailwindcss-language-server/src/util/naturalExpand.ts
@@ -0,0 +1,8 @@
+function pad(n: string): string {
+  return ('00000000' + n).substr(-8)
+}
+
+export function naturalExpand(value: number | string): string {
+  let str = typeof value === 'string' ? value : value.toString()
+  return str.replace(/\d+/g, pad)
+}