Customize

The Tailwind Plugin uses the generated static CSS classes from the Park UI Panda recipes as a preset. In this guide, we will explore various ways to tailor Park UI to your specific needs and make it truly yours.

Make it yours

The Park UI Tailwind theme config is a powerful and comprehensive way to customize the appearance of Park UI components. It allows you to adjust various design elements such as the color palette, accent colors, and border radius, effectively transforming the look and feel of all UI components.

Here’s how you can set your theme preferences in your Tailwind config file to another color palette. In our example, we will use the “amber” color palette, which is one of the available color palettes in Park UI. Also we will use the “sand” color palette for the gray colors. We will not have a border radius here:

const { parkwindPlugin } = require('@park-ui/tailwind-plugin')

module.exports = {
  plugins: [parkwindPlugin],
  parkUI: {
    accentColor: 'amber',
    grayColor: 'sand',
    borderRadius: 'none',
  },
  darkMode: ['class'],
  // ...
}

This configuration lets you control elements like color palettes and accent hues to align your UI with your brand identity and project style. You can find the supported values under “Make it yours” on the documentation page.

Change existing variants

Park UI components are composed of various classes that define their appearance. You can further customize component variants by adding or modifying classes. For example, if you want to change the solid button to uppercase, you can include the Tailwind uppercase class within its recipe styles:

import { tv } from 'tailwind-variants'

export const buttonStyles = tv({
  base: 'button',
  // ...
  variants: {
    variant: {
      solid: 'button--variant_solid uppercase',
      // ...
    },
    // ...
  },
})

This approach empowers you to make granular changes to individual component styles, allowing you to create a UI that suits your specific needs.

Sometimes, you may need to go beyond what the preset classes offer. To make more advanced customizations, you can extend or override the CSS classes of the Park UI components. This lets you create entirely new styles or modify existing ones. For example, if you want to change the solid button to uppercase, you can add the Tailwind uppercase class to its recipe styles:

.button--variant_solid {
  @apply uppercase;
}

This approach enables you to craft unique and specific design changes while keeping your customizations organized and maintainable.

Add new variants

Imagine you want to add another button variant called “uppercase” to the existing variants. You can do this by adding the new variant to the variants object in the button recipe:

import { tv } from 'tailwind-variants'

export const buttonStyles = tv({
  base: 'button',
  // ...
  variants: {
    variant: {
      uppercase: 'button--variant_uppercase',
      // ...
    },
    // ...
  },
})

With that in place, typescript allows you to use the “uppercase” variant now. You can use the new variant in your code:

<Button variant="uppercase">Uppercase</Button>

The button--variant_uppercase is a CSS class that you should define in your CSS file:

.button--variant_uppercase {
  @apply uppercase;
}

Custom color palette

To add your brand colors to the Park UI Tailwind theme, you have to add the color palette to the global css file. As an example, we will use the “my-brand” color palette, as you can see in the following example:

:root {
  --colors-my-accent-1: #f9fefd;
  --colors-my-accent-2: #f2fbf9;
  --colors-my-accent-3: #ddf9f2;
  --colors-my-accent-4: #c8f4e9;
  --colors-my-accent-5: #b3ecde;
  --colors-my-accent-6: #9ce0d0;
  --colors-my-accent-7: #7ecfbd;
  --colors-my-accent-8: #4cbba5;
  --colors-my-accent-9: #86ead4;
  --colors-my-accent-10: #7de0cb;
  --colors-my-accent-11: #027864;
  --colors-my-accent-12: #16433c;

  --colors-my-accent-a1: #0e1515;
  --colors-my-accent-a2: #0f1b1b;
  --colors-my-accent-a3: #092c2b;
  --colors-my-accent-a4: #003a38;
  --colors-my-accent-a5: #004744;
  --colors-my-accent-a6: #105650;
  --colors-my-accent-a7: #1e685f;
  --colors-my-accent-a8: #277f70;
  --colors-my-accent-a9: #86ead4;
  --colors-my-accent-a10: #a8f5e5;
  --colors-my-accent-a11: #58d5ba;
  --colors-my-accent-a12: #c4f5e1;
}

Then you can use it in your Park UI Tailwind theme config:

const { parkwindPlugin } = require('@park-ui/tailwind-plugin')

module.exports = {
  plugins: [parkwindPlugin],
  parkUI: {
    accentColor: 'my-accent',
    grayColor: 'sand',
    borderRadius: 'none',
  },
  darkMode: ['class'],
  // ...
}

Please make sure, that the css variable name matches the following syntax: --colors-<your-color-name>-<number>. <your-color-name> can be any name you want. <number> must be from 1 to 12. The idea is that the color value 9 is your brand color and matches the a9 color. You can see more in the colors section of the documentation.

The same conecpt applies to the gray colors. You can add your own gray color palette to the global css file, and then use it as a grayColor in your Park UI Tailwind theme config.