Configuration

Many Skin elements can be customized by adding the skin property to your tailwind.config.js file. The default configuration is as follows:


                
                // tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
    skin: {
        borderRadius: '.5rem',
        borderRadiusSm: '.25rem',
        borderWidth: '1px',
        boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);',
        themes: { // Valid themes: light, dark
            light: {
                bgDefault: colors.gray["100"],
                bgContent: colors.white,
                borderDefault: colors.gray["300"],
                textDefault: colors.gray["700"],
                textLight: colors.gray["500"],
                textCode: colors.red["600"]
            },
            dark: {
                bgDefault: colors.gray["900"],
                bgContent: colors.gray["800"],
                borderDefault: colors.gray["700"],
                textDefault: colors.gray["300"],
                textLight: colors.gray["500"],
                textCode: colors.red["400"]
            }
        }
    }
}
                
            

These values are used to define the CSS variables and utility classes used by Skin.