diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
index 657814a0041..5a525ba4b6b 100644
--- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
+++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
@@ -57,12 +57,30 @@
 .PlaygroundEditorTheme__textUnderline {
   text-decoration: underline;
 }
+
 .PlaygroundEditorTheme__textStrikethrough {
   text-decoration: line-through;
 }
+
 .PlaygroundEditorTheme__textUnderlineStrikethrough {
   text-decoration: underline line-through;
 }
+
+.PlaygroundEditorTheme__tabNode {
+  position: relative;
+}
+
+/* affected tabs
+.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderline {
+}
+
+.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textStrikethrough {
+}
+
+.PlaygroundEditorTheme__tabNode.PlaygroundEditorTheme__textUnderlineStrikethrough {
+}
+
+*/
 .PlaygroundEditorTheme__textSubscript {
   font-size: 0.8em;
   vertical-align: sub !important;
diff --git a/packages/lexical/src/nodes/LexicalTabNode.ts b/packages/lexical/src/nodes/LexicalTabNode.ts
index d3182e40df0..1697fc426a0 100644
--- a/packages/lexical/src/nodes/LexicalTabNode.ts
+++ b/packages/lexical/src/nodes/LexicalTabNode.ts
@@ -11,6 +11,7 @@ import type {DOMConversionMap, NodeKey} from '../LexicalNode';
 import invariant from 'shared/invariant';
 
 import {IS_UNMERGEABLE} from '../LexicalConstants';
+import {EditorConfig} from '../LexicalEditor';
 import {LexicalNode} from '../LexicalNode';
 import {$applyNodeReplacement} from '../LexicalUtils';
 import {
@@ -47,6 +48,12 @@ export class TabNode extends TextNode {
     return null;
   }
 
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config);
+    dom.classList.add('PlaygroundEditorTheme__tabNode');
+    return dom;
+  }
+
   static importJSON(serializedTabNode: SerializedTabNode): TabNode {
     const node = $createTabNode();
     node.setFormat(serializedTabNode.format);