前端——TailwindCSS在管理系统中的应用技巧

TailwindCSS作为一个功能类优先的CSS框架，在后台管理系统中有独特的优势。

1 响应式布局

<!-- 响应式网格布局 --><divclass="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"><divclass="bg-white rounded-lg shadow p-6"><!-- 卡片内容 --></div><divclass="bg-white rounded-lg shadow p-6"><!-- 卡片内容 --></div></div>

2 主题定制

// tailwind.config.jsmodule.exports={theme:{extend:{colors:{primary:{50:'#eff6ff',100:'#dbeafe',500:'#3b82f6',900:'#1e3a8a'}}}}}

10.3 组件封装

<!-- 按钮组件 --> <template> <button :class="[ 'px-4 py-2 rounded font-medium transition-colors', typeClass, sizeClass, disabled ? 'opacity-50 cursor-not-allowed' : 'hover:opacity-90' ]" :disabled="disabled" > <slot></slot> </button> </template> <script setup> const props = defineProps({ type: { type: String, default: 'primary' }, size: { type: String, default: 'md' }, disabled: Boolean }) const typeClass = computed(() => { const classes = { primary: 'bg-blue-500 text-white', secondary: 'bg-gray-200 text-gray-800', danger: 'bg-red-500 text-white' } return classes[props.type] || classes.primary }) const sizeClass = computed(() => { const classes = { sm: 'text-sm px-3 py-1', md: 'text-base px-4 py-2', lg: 'text-lg px-6 py-3' } return classes[props.size] || classes.md }) </script>