Spacing

How to use the spacing system in andore/ui.

Modify spacing

If you want to customize the spacing of the theme, you have to override the spacing tokens use in the theme system. To do that, you can use the theme.spacing tailwind configuration file.

module.exports = {
    ...,
    content: [
        "./node_modules/@andore-ui/**/*.{js,ts,jsx,tsx}",
    ],
    plugins: [
        require('@andore-ui/theme')({
            theme: {
                spacing: {
                    '4.5': '1.1rem',
                }
            }
        }),
    ],
};

How does it work?

The theme system uses the spacing tokens to define the spacing of the components. The spacing tokens are used to define the padding, margin, and other spacing properties of the components.

For example, let's take this component and see how the spacing tokens are used in the theme system:

Spacing tokens

The spacing tokens are the default tailwindcss spacing values. The only extra token is 4.5 which is equal to 1.1rem.

NOTE: Check the tailwindcss documentation for more information about the spacing values.