Porsche Design System

Introduction

Table of Contents

Setup
Theme

Setup#

The Porsche Design System mandates a minimum version of Tailwind CSS v4. Please ensure your installation meets this requirement.

1. Install Tailwind CSS

Follow the official installation guide:

Install Tailwind CSS Documentation

2. Import the Porsche Design System Tailwind Theme

Add the following lines to your global CSS file, placing the Porsche Design System theme import immediately after the standard Tailwind import:

@import 'tailwindcss';
@import '@porsche-design-system/components-{js|angular|react|vue}/tailwindcss';

Theme#

Configure a Theme switch

By default, the color tokens use the light theme. To enable the dark or auto (automatic dark mode based on system settings) theme, you need to add the corresponding class .dark or .auto to the <html> element. This change will apply the selected theme to all child elements. To implement a three-way theme toggle (light, dark, auto), dynamically update the <html> element’s class using JavaScript:

document.documentElement.classList.remove('light', 'dark', 'auto');
document.documentElement.classList.add(theme); // theme is the selected theme here ('light', 'dark' or 'auto')

Using the Tailwind Theme

To apply a fixed color, you can use any color token with a -light or -dark suffix.

Examples:

.bg-surface — Automatically adapts to the closest .light, .dark, or .auto class on a parent HTML element.

.bg-surface-light — Forces the light theme color.

.bg-surface-dark — Forces the dark theme color.