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.