Introduction
Table of Contents
Setup#
1. Install Tailwind
https://tailwindcss.com/docs/installation
2. Import the Porsche Design System Tailwind Theme
Below the @import "tailwindcss"; line in your global css file, import the Porsche Design System Tailwind theme:
@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);
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.
