多年来一直从事后端开发, 前段时间开始学习 Next.JS 全栈框架.
产生了一些疑问 主要是针对前端问题.
问题如下:
前端开发者是如何快速写出优雅的界面. 依赖 CSS ?
前端开发者是如何快速修改 或者 从 0-1 开发的? 大多是去找模板复制 二次修改吗? 那么这类模板网站大家用的多的是哪些 可以共享吗?
如下 CSS :
cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'size-10',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
},
) |
|