Theming

Learn how to configure your theme

To configure your theme, you’ll need to use Tailwind Css config file, data-attributes and css variables to style the overal UI or specific components.

Palette

Tailus Themer provides nine color palettes, each with primary, secondary, accent, success, danger, warning, info, gray, white, black, and transparent colors. Import these from the @tailus/themer package to use as a foundation for your own palette.

import { palettes } from "@tailus/themer"
theme: {
    extend: {
        colors: palettes.trust,
    }
}

The default palettes are:

  • trust
  • oz
  • mystery
  • passion
  • energy
  • nature
  • spring
  • winter
  • romance

Learn more about customizing the palette on the Palette page.

Border Radius

To set your theme’s border radius, import the rounded plugin from @tailus/themer and add it to tailwind.config.ts's plugins array. Apply the border radius using the data-rounded attribute, preferably on the <html> element.

import { palettes, rounded } from "@tailus/themer"
theme: {
    extend: {
        colors: palettes.trust,
    }
},
plugins : [
    rounded
]
<html data-rounded="large" >

The data-rounded attribute accepts the following values :

  • none
  • default
  • small
  • medium
  • large
  • xlarge
  • 2xlarge
  • 3xlarge
  • full

Learn more about customizing the border radius on the Rounded page.

Shade

Adjust the background and border colors of your components using the data-shade attribute. This change is more noticeable in dark mode. Start with importing and adding the shade plugin your config’s plugins array

import { palettes, rounded, shade } from "@tailus/themer"
theme: {
    extend: {
        colors: palettes.trust,
    }
},
plugins : [
    rounded,
    shade
]
<html data-rounded="large" data-shade="900" >

The available shades are:

  • 800
  • 900
  • 925
  • 950
  • glassy

Shadow

Padding and Typography

You can adjust the padding and text colors of your components using CSS variables. Start with the default settings by importing the components plugin from @tailus/themer and adding it to the plugins array in your configuration file.

import { palettes, rounded, shade, components } from "@tailus/themer"
theme: {
    extend: {
        colors: palettes.trust,
    }
},
plugins : [
    rounded,
    shade,
    components
]

Padding variables

Define the padding CSS variables in your CSS file by assigning them values within the :root selector. Make sure to place these definitions inside the @layer base block for proper layering.

@layer base {
    :root {
        --card-padding: theme("spacing[6]");
        --accordion-padding: theme("spacing[4]");
        --feedback-padding: var(--card-padding);
        --toast-padding: theme("spacing[4]");
    }
}

Text color variables

Define the text colors CSS variables in your CSS file by assigning them values within the :root selector. Make sure to place these definitions inside the @layer base block for proper layering.

@layer base {
    :root {
        --display-text-color: theme(colors.gray.950);
        --title-text-color: var(--display-text-color);
        --caption-text-color: theme(colors.gray.500);
        --body-text-color: theme(colors.gray.700);
        --placeholder-text-color: theme(colors.gray.400);
    }
}

Although you can assign any values to the CSS variables, we suggest using the theme function to access values from the theme object in your tailwind.config.ts file. This approach promotes consistency across your styles.

Dark mode

Setting text colors in dark mode depends on your chosen implementation.

If you’re using the class method (now replaced with selector), create a .dark class and assign the CSS variables there.

@layer base {
    .dark {
        --display-text-color: theme(colors.white);
        --title-text-color: var(--display-text-color);
        --caption-text-color: theme(colors.gray.500);
        --body-text-color: theme(colors.gray.300);
        --placeholder-text-color: theme(colors.gray.600);
    }
}

If you’re using the media method, add the CSS variables within the @media (prefers-color-scheme: dark) block.

@layer base {
    :root {

        // ...colors on light mode

        @media(prefers-color-scheme:dark){
            --display-text-color: theme(colors.white);
            --title-text-color: var(--display-text-color);
            --caption-text-color: theme(colors.gray.500);
            --body-text-color: theme(colors.gray.300);
            --placeholder-text-color: theme(colors.gray.600);
        }
    }
}

Animations

To add animations to your components, import the animations plugin from @tailus/themer and add it to the plugins array in your configuration file.

import { palettes, rounded, shade, components, animations } from "@tailus/themer"
theme: {
    extend: {
        colors: palettes.trust,
    }
},
plugins : [
    rounded,
    shade,
    components,
    animations
]

This is an alternative to copy-pasting the animations for each component.

Other customizations

You can also customize the colors of the data visualizations components by defining CSS variables in your CSS file.

@layer base {
    :root {
        --area-primary-stroke: theme(colors.primary.600);
        --area-secondary-stroke: theme(colors.secondary.600);
        --area-accent-stroke: theme(colors.accent.600);
        --area-gray-stroke: theme(colors.gray.600);
        --area-neutral-stroke: theme(colors.gray.950);
    }
}

The default colors are defined in the components plugin.