Styling - Dapper UI

Styling Components

For styling purposes, most components offer two props: class and style. You can use these props for basic styling tasks such as adding margins to a component. However, we advise against using them for more complex styling, as this may interfere with the component's built-in styles. Instead, try using props that are specific to the component, such as color, size, or radius, if they are available.

Using Svelte classes

You can use the class prop to pass Svelte classes to the component. However, due to the way Svelte works, these class names must be marked as global or they will be removed by the compiler (refer to sveltejs/svelte #4281 for more information).

<Button>A</Button>
<Button class="keep-some-distance">B</Button>

<style>
    :global(.keep-some-distance) {
        margin-left: 32px;
    }
</style>

To avoid using the global modifier, you can wrap the component in a <span> or <div> element:

<Button>A</Button>
<span class="keep-some-distance"><Button>B</Button></span>

<style>
    .keep-some-distance {
        margin-left: 32px;
    }
</style>

Using TailwindCSS

Dapper UI uses the default TailwindCSS configuration with the exception of colors and border radiuses. For the best integration with Dapper UI, we recommend using the following TailwindCSS configuration:

// The colors from the theme. These are the colors of the default theme. Adjust as needed.
const colors = ['primary', 'neutral', 'dark', 'primary', 'neutral', 'dark', 'slate', 'gray', 'zinc', 'neutral-gray', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
const radiuses = ['none', 'sm', 'base', 'md', 'lg', 'full', 'button', 'input', 'checkbox', 'slider-thumb', 'slider-track', 'dialog', 'progressbar', 'meter'];

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    darkMode: ['class', 'd4r-dark'], // Dapper UI uses the 'd4r-dark'for dark mode
    theme: {
        colors: {
            white: '#ffffff',
            black: '#000000',
            ...colors.reduce(
                (acc, color) => ({
                    ...acc,
                    [color]: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900].reduce(
                        (acc, shade) => ({
                            ...acc,
                            [shade]: `rgb(var(--d4r-color-${color}-${shade}) / <alpha-value>)`
                        }),
                        {}
                    )
                }),
                {}
            )
        },
        borderRadius: {
            DEFAULT: 'var(--d4r-border-radius-base)',
            ...radiuses.reduce(
                (acc, name) => ({ ...acc, [name]: `var(--d4r-border-radius-${name})` }),
                {}
            )
        }
    },
};

You can then use the TailwindCSS classes to style components:

1
2

<Button>A</Button>
<Button class="ml-8">B</Button>