diff --git a/packages/pug-lexer/index.js b/packages/pug-lexer/index.js
index 51836c08e..dd45c6585 100644
--- a/packages/pug-lexer/index.js
+++ b/packages/pug-lexer/index.js
@@ -463,7 +463,7 @@ Lexer.prototype = {
    */
 
   className: function() {
-    var tok = this.scan(/^\.([_a-z0-9\-]*[_a-z][_a-z0-9\-]*)/i, 'class');
+    var tok = this.scan(/^\.([_a-z0-9\-]*[_a-z]([_a-z0-9\-\[\]]|:(?! ))*)/i, 'class');
     if (tok) {
       this.tokens.push(tok);
       this.incrementColumn(tok.val.length);
diff --git a/packages/pug-lexer/test/cases/classes.pug b/packages/pug-lexer/test/cases/classes.pug
index 699a07586..cd89eee88 100644
--- a/packages/pug-lexer/test/cases/classes.pug
+++ b/packages/pug-lexer/test/cases/classes.pug
@@ -12,3 +12,5 @@ a(class={foo: true, bar: false, baz: true})
 
 a.-foo
 a.3foo
+
+a.focus:border.lg:w-[555px]
\ No newline at end of file