diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
index 747c69ed..1740a64e 100644
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@@ -1,5 +1,6 @@
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { autoIncrement } from '../../internal/auto-increment';
 import styles from './tab-panel.styles';
 import type { CSSResultGroup } from 'lit';
@@ -33,10 +34,16 @@ export default class SlTabPanel extends LitElement {
   }
 
   render() {
-    this.style.display = this.active ? 'block' : 'none';
-
     return html`
-      <div part="base" class="tab-panel" role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
+      <div
+        part="base"
+        class=${classMap({
+          'tab-panel': true,
+          'tab-panel--active': this.active
+        })}
+        role="tabpanel"
+        aria-hidden=${this.active ? 'false' : 'true'}
+      >
         <slot></slot>
       </div>
     `;