WakeAdmin 后台框架Appearance
@wakeadmin/tailwind
基于惟客云主题扩展的 tailwind 的配置预设；
如何使用
我们首先根据tailwind官方提供的安装教程进行安装以及初始化;
完成上述流程之后，我们需要加入@wakeadmin/tailwind的预设
// tailwind.config.js
module.exports = {
// ...
preset: [require('@wakeadmin/tailwind')],
};
之后，我们就可以直接使用了;
变量
基本色彩
这些颜色都是基本颜色，因此可以在其他地方进行使用，例如text-xxxx,border-xxxx都是可以的；
Class Properties
whitecolor: var(--wk-color-white) Aa
blackcolor: var(--wk-color-black) Aa
primary-900color: var(--wk-color-primary-900) Aa
primary-800color: var(--wk-color-primary-800) Aa
primary-700color: var(--wk-color-primary-700) Aa
primary-600color: var(--wk-color-primary-600) Aa
primary-500color: var(--wk-color-primary-500) Aa
primary-400color: var(--wk-color-primary-400) Aa
primary-300color: var(--wk-color-primary-300) Aa
primary-200color: var(--wk-color-primary-200) Aa
primary-100color: var(--wk-color-primary-100) Aa
primary-50color: var(--wk-color-primary-50) Aa
secondary-900color: var(--wk-color-secondary-900) Aa
secondary-800color: var(--wk-color-secondary-800) Aa
secondary-700color: var(--wk-color-secondary-700) Aa
secondary-600color: var(--wk-color-secondary-600) Aa
secondary-500color: var(--wk-color-secondary-500) Aa
secondary-400color: var(--wk-color-secondary-400) Aa
secondary-300color: var(--wk-color-secondary-300) Aa
secondary-200color: var(--wk-color-secondary-200) Aa
secondary-100color: var(--wk-color-secondary-100) Aa
secondary-50color: var(--wk-color-secondary-50) Aa
success-900color: var(--wk-color-success-900) Aa
success-800color: var(--wk-color-success-800) Aa
success-700color: var(--wk-color-success-700) Aa
success-600color: var(--wk-color-success-600) Aa
success-500color: var(--wk-color-success-500) Aa
success-400color: var(--wk-color-success-400) Aa
success-300color: var(--wk-color-success-300) Aa
success-200color: var(--wk-color-success-200) Aa
success-100color: var(--wk-color-success-100) Aa
success-50color: var(--wk-color-success-50) Aa
danger-900color: var(--wk-color-danger-900) Aa
danger-800color: var(--wk-color-danger-800) Aa
danger-700color: var(--wk-color-danger-700) Aa
danger-600color: var(--wk-color-danger-600) Aa
danger-500color: var(--wk-color-danger-500) Aa
danger-400color: var(--wk-color-danger-400) Aa
danger-300color: var(--wk-color-danger-300) Aa
danger-200color: var(--wk-color-danger-200) Aa
danger-100color: var(--wk-color-danger-100) Aa
danger-50color: var(--wk-color-danger-50) Aa
warning-900color: var(--wk-color-warning-900) Aa
warning-800color: var(--wk-color-warning-800) Aa
warning-700color: var(--wk-color-warning-700) Aa
warning-600color: var(--wk-color-warning-600) Aa
warning-500color: var(--wk-color-warning-500) Aa
warning-400color: var(--wk-color-warning-400) Aa
warning-300color: var(--wk-color-warning-300) Aa
warning-200color: var(--wk-color-warning-200) Aa
warning-100color: var(--wk-color-warning-100) Aa
warning-50color: var(--wk-color-warning-50) Aa
info-900color: var(--wk-color-info-900) Aa
info-800color: var(--wk-color-info-800) Aa
info-700color: var(--wk-color-info-700) Aa
info-600color: var(--wk-color-info-600) Aa
info-500color: var(--wk-color-info-500) Aa
info-400color: var(--wk-color-info-400) Aa
info-300color: var(--wk-color-info-300) Aa
info-200color: var(--wk-color-info-200) Aa
info-100color: var(--wk-color-info-100) Aa
info-50color: var(--wk-color-info-50) Aa
gray-900color: var(--wk-color-gray-900) Aa
gray-800color: var(--wk-color-gray-800) Aa
gray-700color: var(--wk-color-gray-700) Aa
gray-600color: var(--wk-color-gray-600) Aa
gray-500color: var(--wk-color-gray-500) Aa
gray-400color: var(--wk-color-gray-400) Aa
gray-300color: var(--wk-color-gray-300) Aa
gray-200color: var(--wk-color-gray-200) Aa
gray-100color: var(--wk-color-gray-100) Aa
gray-50color: var(--wk-color-gray-50) Aa
gray-0color: var(--wk-color-gray-0) Aa
字体颜色
Class Properties
text-whitecolor: var(--wk-color-white) Aa
text-blackcolor: var(--wk-color-black) Aa
text-primarycolor: var(--wk-color-primary-900) Aa
text-primary-900color: var(--wk-color-primary-900) Aa
text-primary-800color: var(--wk-color-primary-800) Aa
text-primary-700color: var(--wk-color-primary-700) Aa
text-primary-600color: var(--wk-color-primary-600) Aa
text-primary-500color: var(--wk-color-primary-500) Aa
text-primary-400color: var(--wk-color-primary-400) Aa
text-primary-300color: var(--wk-color-primary-300) Aa
text-primary-200color: var(--wk-color-primary-200) Aa
text-primary-100color: var(--wk-color-primary-100) Aa
text-primary-50color: var(--wk-color-primary-50) Aa
text-secondarycolor: var(--wk-color-secondary-900) Aa
text-secondary-900color: var(--wk-color-secondary-900) Aa
text-secondary-800color: var(--wk-color-secondary-800) Aa
text-secondary-700color: var(--wk-color-secondary-700) Aa
text-secondary-600color: var(--wk-color-secondary-600) Aa
text-secondary-500color: var(--wk-color-secondary-500) Aa
text-secondary-400color: var(--wk-color-secondary-400) Aa
text-secondary-300color: var(--wk-color-secondary-300) Aa
text-secondary-200color: var(--wk-color-secondary-200) Aa
text-secondary-100color: var(--wk-color-secondary-100) Aa
text-secondary-50color: var(--wk-color-secondary-50) Aa
text-successcolor: var(--wk-color-success-500) Aa
text-success-900color: var(--wk-color-success-900) Aa
text-success-800color: var(--wk-color-success-800) Aa
text-success-700color: var(--wk-color-success-700) Aa
text-success-600color: var(--wk-color-success-600) Aa
text-success-500color: var(--wk-color-success-500) Aa
text-success-400color: var(--wk-color-success-400) Aa
text-success-300color: var(--wk-color-success-300) Aa
text-success-200color: var(--wk-color-success-200) Aa
text-success-100color: var(--wk-color-success-100) Aa
text-success-50color: var(--wk-color-success-50) Aa
text-dangercolor: var(--wk-color-danger-600) Aa
text-danger-900color: var(--wk-color-danger-900) Aa
text-danger-800color: var(--wk-color-danger-800) Aa
text-danger-700color: var(--wk-color-danger-700) Aa
text-danger-600color: var(--wk-color-danger-600) Aa
text-danger-500color: var(--wk-color-danger-500) Aa
text-danger-400color: var(--wk-color-danger-400) Aa
text-danger-300color: var(--wk-color-danger-300) Aa
text-danger-200color: var(--wk-color-danger-200) Aa
text-danger-100color: var(--wk-color-danger-100) Aa
text-danger-50color: var(--wk-color-danger-50) Aa
text-warningcolor: var(--wk-color-warning-500) Aa
text-warning-900color: var(--wk-color-warning-900) Aa
text-warning-800color: var(--wk-color-warning-800) Aa
text-warning-700color: var(--wk-color-warning-700) Aa
text-warning-600color: var(--wk-color-warning-600) Aa
text-warning-500color: var(--wk-color-warning-500) Aa
text-warning-400color: var(--wk-color-warning-400) Aa
text-warning-300color: var(--wk-color-warning-300) Aa
text-warning-200color: var(--wk-color-warning-200) Aa
text-warning-100color: var(--wk-color-warning-100) Aa
text-warning-50color: var(--wk-color-warning-50) Aa
text-infocolor: var(--wk-color-info-500) Aa
text-info-900color: var(--wk-color-info-900) Aa
text-info-800color: var(--wk-color-info-800) Aa
text-info-700color: var(--wk-color-info-700) Aa
text-info-600color: var(--wk-color-info-600) Aa
text-info-500color: var(--wk-color-info-500) Aa
text-info-400color: var(--wk-color-info-400) Aa
text-info-300color: var(--wk-color-info-300) Aa
text-info-200color: var(--wk-color-info-200) Aa
text-info-100color: var(--wk-color-info-100) Aa
text-info-50color: var(--wk-color-info-50) Aa
text-gray-900color: var(--wk-color-gray-900) Aa
text-gray-800color: var(--wk-color-gray-800) Aa
text-gray-700color: var(--wk-color-gray-700) Aa
text-gray-600color: var(--wk-color-gray-600) Aa
text-gray-500color: var(--wk-color-gray-500) Aa
text-gray-400color: var(--wk-color-gray-400) Aa
text-gray-300color: var(--wk-color-gray-300) Aa
text-gray-200color: var(--wk-color-gray-200) Aa
text-gray-100color: var(--wk-color-gray-100) Aa
text-gray-50color: var(--wk-color-gray-50) Aa
text-gray-0color: var(--wk-color-gray-0) Aa
text-linkcolor: var(--wk-color-link) Aa
text-link-hovercolor: var(--wk-color-link-hover) Aa
text-font-primarycolor: var(--wk-color-font-primary) Aa
text-font-regularcolor: var(--wk-color-font-regular) Aa
text-font-secondarycolor: var(--wk-color-font-secondary) Aa
text-font-placeholdercolor: var(--wk-color-font-placeholder) Aa
text-font-disabledcolor: var(--wk-color-font-disabled) Aa
text-font-inversecolor: var(--wk-color-font-inverse) Aa
边框颜色
Class Properties
border-whiteborder-color: var(--wk-color-white) Aa
border-blackborder-color: var(--wk-color-black) Aa
border-primary-900border-color : var(--wk-color-primary-900) Aa
border-primary-800border-color : var(--wk-color-primary-800) Aa
border-primary-700border-color : var(--wk-color-primary-700) Aa
border-primary-600border-color : var(--wk-color-primary-600) Aa
border-primary-500border-color : var(--wk-color-primary-500) Aa
border-primary-400border-color : var(--wk-color-primary-400) Aa
border-primary-300border-color : var(--wk-color-primary-300) Aa
border-primary-200border-color : var(--wk-color-primary-200) Aa
border-primary-100border-color : var(--wk-color-primary-100) Aa
border-primary-50border-color : var(--wk-color-primary-50) Aa
border-secondary-900border-color : var(--wk-color-secondary-900) Aa
border-secondary-800border-color : var(--wk-color-secondary-800) Aa
border-secondary-700border-color : var(--wk-color-secondary-700) Aa
border-secondary-600border-color : var(--wk-color-secondary-600) Aa
border-secondary-500border-color : var(--wk-color-secondary-500) Aa
border-secondary-400border-color : var(--wk-color-secondary-400) Aa
border-secondary-300border-color : var(--wk-color-secondary-300) Aa
border-secondary-200border-color : var(--wk-color-secondary-200) Aa
border-secondary-100border-color : var(--wk-color-secondary-100) Aa
border-secondary-50border-color : var(--wk-color-secondary-50) Aa
border-success-900border-color : var(--wk-color-success-900) Aa
border-success-800border-color : var(--wk-color-success-800) Aa
border-success-700border-color : var(--wk-color-success-700) Aa
border-success-600border-color : var(--wk-color-success-600) Aa
border-success-500border-color : var(--wk-color-success-500) Aa
border-success-400border-color : var(--wk-color-success-400) Aa
border-success-300border-color : var(--wk-color-success-300) Aa
border-success-200border-color : var(--wk-color-success-200) Aa
border-success-100border-color : var(--wk-color-success-100) Aa
border-success-50border-color : var(--wk-color-success-50) Aa
border-danger-900border-color : var(--wk-color-danger-900) Aa
border-danger-800border-color : var(--wk-color-danger-800) Aa
border-danger-700border-color : var(--wk-color-danger-700) Aa
border-danger-600border-color : var(--wk-color-danger-600) Aa
border-danger-500border-color : var(--wk-color-danger-500) Aa
border-danger-400border-color : var(--wk-color-danger-400) Aa
border-danger-300border-color : var(--wk-color-danger-300) Aa
border-danger-200border-color : var(--wk-color-danger-200) Aa
border-danger-100border-color : var(--wk-color-danger-100) Aa
border-danger-50border-color : var(--wk-color-danger-50) Aa
border-warning-900border-color : var(--wk-color-warning-900) Aa
border-warning-800border-color : var(--wk-color-warning-800) Aa
border-warning-700border-color : var(--wk-color-warning-700) Aa
border-warning-600border-color : var(--wk-color-warning-600) Aa
border-warning-500border-color : var(--wk-color-warning-500) Aa
border-warning-400border-color : var(--wk-color-warning-400) Aa
border-warning-300border-color : var(--wk-color-warning-300) Aa
border-warning-200border-color : var(--wk-color-warning-200) Aa
border-warning-100border-color : var(--wk-color-warning-100) Aa
border-warning-50border-color : var(--wk-color-warning-50) Aa
border-info-900border-color : var(--wk-color-info-900) Aa
border-info-800border-color : var(--wk-color-info-800) Aa
border-info-700border-color : var(--wk-color-info-700) Aa
border-info-600border-color : var(--wk-color-info-600) Aa
border-info-500border-color : var(--wk-color-info-500) Aa
border-info-400border-color : var(--wk-color-info-400) Aa
border-info-300border-color : var(--wk-color-info-300) Aa
border-info-200border-color : var(--wk-color-info-200) Aa
border-info-100border-color : var(--wk-color-info-100) Aa
border-info-50border-color : var(--wk-color-info-50) Aa
border-gray-900border-color : var(--wk-color-gray-900) Aa
border-gray-800border-color : var(--wk-color-gray-800) Aa
border-gray-700border-color : var(--wk-color-gray-700) Aa
border-gray-600border-color : var(--wk-color-gray-600) Aa
border-gray-500border-color : var(--wk-color-gray-500) Aa
border-gray-400border-color : var(--wk-color-gray-400) Aa
border-gray-300border-color : var(--wk-color-gray-300) Aa
border-gray-200border-color : var(--wk-color-gray-200) Aa
border-gray-100border-color : var(--wk-color-gray-100) Aa
border-gray-50border-color : var(--wk-color-gray-50) Aa
border-gray-0border-color : var(--wk-color-gray-0) Aa
borderborder-color: var(--wk-color-border) Aa
border-darkborder-color: var(--wk-color-border-dark) Aa
border-lightborder-color: var(--wk-color-border-light) Aa
border-lighterborder-color: var(--wk-color-border-lighter) Aa
背景颜色
bgbackground-color: var(--wk-color-bg) Aa
bg-whitebackground-color: var(--wk-color-white) Aa
bg-darkbackground-color: var(--wk-color-bg-dark) Aa
bg-blackbackground-color: var(--wk-color-black) Aa
bg-primary-900background-color: var(--wk-color-primary-900) Aa
bg-primary-800background-color: var(--wk-color-primary-800) Aa
bg-primary-700background-color: var(--wk-color-primary-700) Aa
bg-primary-600background-color: var(--wk-color-primary-600) Aa
bg-primary-500background-color: var(--wk-color-primary-500) Aa
bg-primary-400background-color: var(--wk-color-primary-400) Aa
bg-primary-300background-color: var(--wk-color-primary-300) Aa
bg-primary-200background-color: var(--wk-color-primary-200) Aa
bg-primary-100background-color: var(--wk-color-primary-100) Aa
bg-primary-50background-color: var(--wk-color-primary-50) Aa
bg-secondary-900background-color: var(--wk-color-secondary-900) Aa
bg-secondary-800background-color: var(--wk-color-secondary-800) Aa
bg-secondary-700background-color: var(--wk-color-secondary-700) Aa
bg-secondary-600background-color: var(--wk-color-secondary-600) Aa
bg-secondary-500background-color: var(--wk-color-secondary-500) Aa
bg-secondary-400background-color: var(--wk-color-secondary-400) Aa
bg-secondary-300background-color: var(--wk-color-secondary-300) Aa
bg-secondary-200background-color: var(--wk-color-secondary-200) Aa
bg-secondary-100background-color: var(--wk-color-secondary-100) Aa
bg-secondary-50background-color: var(--wk-color-secondary-50) Aa
bg-success-900background-color: var(--wk-color-success-900) Aa
bg-success-800background-color: var(--wk-color-success-800) Aa
bg-success-700background-color: var(--wk-color-success-700) Aa
bg-success-600background-color: var(--wk-color-success-600) Aa
bg-success-500background-color: var(--wk-color-success-500) Aa
bg-success-400background-color: var(--wk-color-success-400) Aa
bg-success-300background-color: var(--wk-color-success-300) Aa
bg-success-200background-color: var(--wk-color-success-200) Aa
bg-success-100background-color: var(--wk-color-success-100) Aa
bg-success-50background-color: var(--wk-color-success-50) Aa
bg-danger-900background-color: var(--wk-color-danger-900) Aa
bg-danger-800background-color: var(--wk-color-danger-800) Aa
bg-danger-700background-color: var(--wk-color-danger-700) Aa
bg-danger-600background-color: var(--wk-color-danger-600) Aa
bg-danger-500background-color: var(--wk-color-danger-500) Aa
bg-danger-400background-color: var(--wk-color-danger-400) Aa
bg-danger-300background-color: var(--wk-color-danger-300) Aa
bg-danger-200background-color: var(--wk-color-danger-200) Aa
bg-danger-100background-color: var(--wk-color-danger-100) Aa
bg-danger-50background-color: var(--wk-color-danger-50) Aa
bg-warning-900background-color: var(--wk-color-warning-900) Aa
bg-warning-800background-color: var(--wk-color-warning-800) Aa
bg-warning-700background-color: var(--wk-color-warning-700) Aa
bg-warning-600background-color: var(--wk-color-warning-600) Aa
bg-warning-500background-color: var(--wk-color-warning-500) Aa
bg-warning-400background-color: var(--wk-color-warning-400) Aa
bg-warning-300background-color: var(--wk-color-warning-300) Aa
bg-warning-200background-color: var(--wk-color-warning-200) Aa
bg-warning-100background-color: var(--wk-color-warning-100) Aa
bg-warning-50background-color: var(--wk-color-warning-50) Aa
bg-info-900background-color: var(--wk-color-info-900) Aa
bg-info-800background-color: var(--wk-color-info-800) Aa
bg-info-700background-color: var(--wk-color-info-700) Aa
bg-info-600background-color: var(--wk-color-info-600) Aa
bg-info-500background-color: var(--wk-color-info-500) Aa
bg-info-400background-color: var(--wk-color-info-400) Aa
bg-info-300background-color: var(--wk-color-info-300) Aa
bg-info-200background-color: var(--wk-color-info-200) Aa
bg-info-100background-color: var(--wk-color-info-100) Aa
bg-info-50background-color: var(--wk-color-info-50) Aa
bg-gray-900background-color: var(--wk-color-gray-900) Aa
bg-gray-800background-color: var(--wk-color-gray-800) Aa
bg-gray-700background-color: var(--wk-color-gray-700) Aa
bg-gray-600background-color: var(--wk-color-gray-600) Aa
bg-gray-500background-color: var(--wk-color-gray-500) Aa
bg-gray-400background-color: var(--wk-color-gray-400) Aa
bg-gray-300background-color: var(--wk-color-gray-300) Aa
bg-gray-200background-color: var(--wk-color-gray-200) Aa
bg-gray-100background-color: var(--wk-color-gray-100) Aa
bg-gray-50background-color: var(--wk-color-gray-50) Aa
bg-gray-0background-color: var(--wk-color-gray-0) Aa
圆角
Class Properties
rounded-noneborder-radius: 0 Aa
roundedborder-radius: var(--wk-border-radius-base) Aa
rounded-smborder-radius: var(--wk-border-radius-sm) Aa
rounded-mdborder-radius: var(--wk-border-radius-md) Aa
rounded-lgborder-radius: var(--wk-border-radius-lg) Aa
rounded-fullborder-radius: var(--wk-border-radius-full) Aa
间距
这些间距跟基本色彩一样，不能直接进行使用。是提供给其他属性所使用的，我们可以通过pd-xxxx、mr-xxxx对其进行引用；
Class Properties
spacingvar(--wk-color-spacing-base)24px
spacing-xsvar(--wk-color-spacing-xs)8px
spacing-smvar(--wk-color-spacing-sm)16px
spacing-mdvar(--wk-color-spacing-md)32px
spacing-lgvar(--wk-color-spacing-lg)48px
spacing-fullvar(--wk-color-spacing-full)64px
zIndex
Class Properties
z-normalz-index:var(--wk-z-index-normal)1
z-dropdownz-index:var(--wk-z-index-dropdown)1000
z-stickyz-index:var(--wk-z-index-sticky)1020
z-fixedz-index:var(--wk-z-index-fixed)1030
z-modalz-index:var(--wk-z-index-modal)1040
z-tooltipz-index:var(--wk-z-index-tooltip)1050
字体大小及行高
Class Properties
text-h1font-size:var(--wk-font-size-h1);
line-height: var(--wk-font-line-height-h1);
text-h2font-size:var(--wk-font-size-h2);
line-height: var(--wk-font-line-height-h2);
text-h3font-size:var(--wk-font-size-h3);
line-height: var(--wk-font-line-height-h3);
text-h4font-size:var(--wk-font-size-h4);
line-height: var(--wk-font-line-height-h4);
text-h5font-size:var(--wk-font-size-h5);
line-height: var(--wk-font-line-height-h5);
text-h6font-size:var(--wk-font-size-h6);
line-height: var(--wk-font-line-height-h6);