/** * @program: kicc-ui * @description: windi-css样式库配置 * css框架: 可定制,响应式,提取共用属性 * tailwind-css官网: https://www.tailwindcss.cn * windi-css官网: https://cn.windicss.org/guide * @author: entfrm开发团队-王翔 * @create: 2022/4/4 */ import { defineConfig } from 'vite-plugin-windicss'; import { primaryColor } from './build/config/themeConfig'; export default defineConfig({ darkMode: 'class', plugins: [createEnterPlugin()], theme: { extend: { zIndex: { '-1': '-1', }, colors: { primary: primaryColor, }, screens: { sm: '576px', md: '768px', lg: '992px', xl: '1200px', '2xl': '1600px', }, }, }, }); /** * 用于显示元素时的动画 * @param maxOutput maxOutput 输出越大,生成的css体积越大 */ function createEnterPlugin(maxOutput = 10) { const createCss = (index: number, d = 'x') => { const upd = d.toUpperCase(); return { [`*> .enter-${d}:nth-child(${index})`]: { transform: `translate${upd}(50px)`, }, [`*> .-enter-${d}:nth-child(${index})`]: { transform: `translate${upd}(-50px)`, }, [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: { 'z-index': `${10 - index}`, opacity: '0', animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`, 'animation-fill-mode': 'forwards', 'animation-delay': `${(index * 1) / 10}s`, }, }; }; const handler = ({ addBase }) => { const addRawCss = {}; for (let index = 1; index < maxOutput; index++) { Object.assign(addRawCss, { ...createCss(index, 'x'), ...createCss(index, 'y'), }); } addBase({ ...addRawCss, ['@keyframes enter-x-animation']: { to: { opacity: '1', transform: 'translateX(0)', }, }, ['@keyframes enter-y-animation']: { to: { opacity: '1', transform: 'translateY(0)', }, }, }); }; return { handler }; }