diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee
index 86f70e9d1..f8bc55742 100644
--- a/spec/editor-component-spec.coffee
+++ b/spec/editor-component-spec.coffee
@@ -197,6 +197,50 @@ describe "EditorComponent", ->
       nextAnimationFrame()
       expect(linesNode.style.backgroundColor).toBe 'rgb(255, 0, 0)'
 
+    it "applies .leading-whitespace for lines with leading spaces and/or tabs", ->
+      editor.setText(' a')
+      nextAnimationFrame()
+
+      leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
+      expect(leafNodes[0].classList.contains('leading-whitespace')).toBe true
+      expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe false
+
+      editor.setText('\ta')
+      nextAnimationFrame()
+
+      leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
+      expect(leafNodes[0].classList.contains('leading-whitespace')).toBe true
+      expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe false
+
+    it "applies .trailing-whitespace for lines with trailing spaces and/or tabs", ->
+      editor.setText(' ')
+      nextAnimationFrame()
+
+      leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
+      expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe true
+      expect(leafNodes[0].classList.contains('leading-whitespace')).toBe false
+
+      editor.setText('\t')
+      nextAnimationFrame()
+
+      leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
+      expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe true
+      expect(leafNodes[0].classList.contains('leading-whitespace')).toBe false
+
+      editor.setText('a ')
+      nextAnimationFrame()
+
+      leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
+      expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe true
+      expect(leafNodes[0].classList.contains('leading-whitespace')).toBe false
+
+      editor.setText('a\t')
+      nextAnimationFrame()
+
+      leafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
+      expect(leafNodes[0].classList.contains('trailing-whitespace')).toBe true
+      expect(leafNodes[0].classList.contains('leading-whitespace')).toBe false
+
     describe "when showInvisibles is enabled", ->
       invisibles = null
 
diff --git a/src/token.coffee b/src/token.coffee
index fabf33de8..5366f33cc 100644
--- a/src/token.coffee
+++ b/src/token.coffee
@@ -153,6 +153,8 @@ class Token
   getValueAsHtml: ({hasIndentGuide}) ->
     if @isHardTab
       classes = 'hard-tab'
+      classes += ' leading-whitespace' if @hasLeadingWhitespace()
+      classes += ' trailing-whitespace' if @hasTrailingWhitespace()
       classes += ' indent-guide' if hasIndentGuide
       classes += ' invisible-character' if @hasInvisibleCharacters
       html = "<span class='#{classes}'>#{@escapeString(@value)}</span>"