@daimler/productkit-tailwind v2.1.0

Product Kit Tailwind translates design tokens of Product Kit Core in the form of a predefined tailwind.config.js which can be imported in your own Tailwind config so you can start writing frontend code without learning how to adapt to styleguide specifications.

The following theme definitions have predefined values from Product Kit Core:

• Colors
• Typography
• Spacing
• Layout
• Opacity
• Sizes

If you need further improvements to Product Kit Tailwind or miss something from the styleguide feel free to open an issue!

Installation

1. Add Product Kit Tailwind as a dependency through npm:

npm install -D @daimler/productkit-tailwind

2. Import Product Kit Tailwind to your tailwind.config.js like so:

module.exports = {
  presets: [
    require('@daimler/productkit-tailwind/productkit.tailwind.config.js')
  ]

5. Add additional style information to your main styles css

@import 'tailwindcss/base';
@import '@daimler/productkit-tailwind/src/styles.css';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Usage

Product Kit Tailwind offers utility functions for frontends incorporating the styleguide of Mercedes-Benz Tech Innovation.

If you want to get the most out of Product Kit Tailwind please familiarise yourself with Product Kit Core and its design tokens.

Colors

All colors defined in Product Kit Core can be referenced through Tailwinds utility functions:

<div class="bg-primary text-contrast-background border-goldentainoi-400">

There is no need to specify dark mode specific colors. Application colors like primary, secondary, background or surface will automatically switch to their dark mode representations. Learn more about this behavior in the Dark Mode section below.

If you want to have a list of all the predefined colors please take a look at the color defnitions here.

Spacings

Product Kit Tailwind comes preloaded with styleguide specific spacing definitions which can be used through Tailwinds utility functions:

<div class="mt-2 px-3 gap-y-16">

Additionally to these abolute spacing defintions you can use opinionated spacing styles that behave according to viewport sizes (dynamic spacing):

<div class="mt-m">

The class above will translate to the following css:

...
@media (min-width: 600px) {
    .mt-m {
        margin-top: 32px;
    }
}
@media (min-width: 905px) {
    .mt-m {
        margin-top: 48px;
    }
}
...

Typography

Every text style defined in Product Kit Core can easily be specified with a css class:

<span class="text-headline3">
    This is a headline!
</span>

When using a predefined text style class you get responsive behavior for free! The above class definition will translate to: (example values)

.text-headline3 {
    font-size: 34px;
    line-height: 44px;
    letter-spacing: 0.1px;
    text-transform: uppercase;
}
@screen m {
    .text-headline3 {
        font-size: 48px;
        line-height: 60px;
        letter-spacing: 0px;
    }
}

If you want to have a list of all the predefined text styles please take a look at the responsive typography plugin here.

Headline Divider

The styleguide defines a divider below headlines. You can use the predefined class .divider to get a responsive line below headlines.

<div class="divider" />

Note: You have to calculate the width of the divider according to the headline size. Learn more about the divider behavior in the Mercedes-Benz Tech Innovation styleguide.

Responsive Layout

Product Kit Tailwind provides a .container and .container-wide class that you can use to adapt the content of your frontend to layout specifications of Product Kit Core. Everything inside your container element is arranged according to predefined breakpoints and grid definitions.

<div class="container">
    Responsive Body
</div>

The class above will translate to the following css: (example values)

.container {
    width: 90%;
    display: grid;
    margin: auto;
}
@screen xs {
    .container {
        width: 87%;
        column-gap: 16px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
...

Dark Mode

You can get dark mode specific colors by adding .dark to the root element of your html code:

<html class="dark">

This will automatically switch application colors to their dark mode counterpart.

If you need further guidance in how to implement a dark mode switch please take a look inside the test directory here.

The following color names will switch automatically:

• primary
• secondary
• tertiary
• quternary
• background
• surface
• outline
• error
• success
• all contrast colors

Note: Contrast colors are used as text colors. If text is displayed on the background color primary the text color should be contrast-primary. Please also make yourself familiar with text opacity values. You can find further information here.

Contributing

We welcome any contributions. If you want to contribute to this project, please read the contributing guide.

Code of Conduct

Please read our Code of Conduct as it is our base for interaction.

License

This project is licensed under the MIT LICENSE.

Provider Information

Please visit https://www.mercedes-benz-techinnovation.com/en/imprint/ for information on the provider.

Notice: Before you use the program in productive use, please take all necessary precautions, e.g. testing and verifying the program with regard to your specific use. The program was tested solely for our own use cases, which might differ from yours.