• Quick start
• Integration

# Create a new application by executing:
npm create vite@latest my-app -- --template vanilla-ts

npm install @porsche-design-system/components-js

// vite.config.ts

import { defineConfig } from 'vite';
import { getLoaderScript } from '@porsche-design-system/components-js/partials';

const transformIndexHtmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html: string) {
      const bodyPartials = [getLoaderScript()].join('');

      return html.replace(/<\/body>/, `${bodyPartials}$&`);
    },
  };
};

export default defineConfig({
  plugins: [transformIndexHtmlPlugin()],
});

// vite.config.ts

import { defineConfig } from 'vite';
import {
  getLoaderScript,
  getComponentChunkLinks,
  getFontFaceStyles,
  getFontLinks,
  getIconLinks,
  getInitialStyles,
  getMetaTagsAndIconLinks,
} from '@porsche-design-system/components-js/partials';

const transformIndexHtmlPlugin = () => {
  return {
    name: 'html-transform',
    transformIndexHtml(html: string) {
      const headPartials = [
        // injects stylesheet which defines visibility of pre-hydrated PDS components
        getInitialStyles(),
        // injects stylesheet which defines Porsche Next CSS font-face definition (=> minimize FOUT)
        getFontFaceStyles(),
        // preloads Porsche Next font (=> minimize FOUT)
        getFontLinks(),
        // preloads PDS component core chunk from CDN for PDS component hydration (=> improve loading performance)
        getComponentChunkLinks(),
        // preloads Porsche icons (=> minimize FOUC)
        getIconLinks(),
        // injects favicon, apple touch icons, android touch icons, etc.
        getMetaTagsAndIconLinks({ appTitle: 'Porsche' }),
      ].join('');

      const bodyPartials = [getLoaderScript()].join('');

      return html.replace(/<\/head>/, `${headPartials}$&`).replace(/<\/body>/, `${bodyPartials}$&`);
    },
  };
};

export default defineConfig({
  plugins: [transformIndexHtmlPlugin()],
});

Using Tailwind CSS with the Porsche Design System Theme provides a powerful benefit: Your styles are truly framework-agnostic. Since Tailwind generates atomic utility classes, you eliminate cascading style issues, promoting long-term scalability and maintainability for large projects. The patterns and components you build are easily portable. You can copy and paste the same styling code between projects, teams, and different technology stacks (React, Angular, Vue, plain HTML, etc.), ensuring 100% visual uniformity across the organization. You can now use and customize the provided Patterns and Templates, which are all written in Tailwind CSS, to build applications quickly and efficiently.

npm install tailwindcss @tailwindcss/vite

// vite.config.ts

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

const transformIndexHtmlPlugin = () => { … }

export default defineConfig({
  plugins: [transformIndexHtmlPlugin(), tailwindcss()],
});

/* src/style.css */

@import 'tailwindcss';
@import '@porsche-design-system/components-js/tailwindcss';

// src/main.ts

import './style.css';

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div class="grid justify-items-center gap-fluid-md m-static-lg p-fluid-lg bg-surface rounded-lg">
    <p-wordmark></p-wordmark>
    <h1 class="prose-display-md">Porsche Design System</h1>
  </div>
  <div class="…">…</div>
`;