TailwindCSS 高级技巧：打造精美 UI

自定义主题

在 tailwind.config.js 中扩展默认主题：

module.exports = {

theme: {

extend: {

colors: {

brand: {

50: '#f0f9ff',

500: '#0ea5e9',

900: '#0c4a6e',

}

},

fontFamily: {

sans: ['Inter', 'sans-serif'],

},

animation: {

'fade-in': 'fadeIn 0.5s ease-in-out',

'slide-up': 'slideUp 0.3s ease-out',

},

keyframes: {

fadeIn: {

'0%': { opacity: '0' },

'100%': { opacity: '1' },

},

slideUp: {

'0%': { transform: 'translateY(10px)', opacity: '0' },

'100%': { transform: 'translateY(0)', opacity: '1' },

},

},

},

},

}

使用 @apply 创建组件类

@layer components {

.btn {

@apply px-4 py-2 rounded-lg font-medium transition-colors;

}

.btn-primary {

@apply btn bg-blue-500 text-white hover:bg-blue-600;

}

.btn-secondary {

@apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;

}

.card {

@apply bg-white rounded-xl shadow-lg p-6;

}

}

响应式设计技巧

<!-- 移动优先设计 -->

<div class="

grid

grid-cols-1

sm:grid-cols-2

lg:grid-cols-3

xl:grid-cols-4

gap-4

">

<!-- 卡片内容 -->

</div>

<!-- 容器查询 -->

<div class="@container">

<div class="@lg:flex @lg:gap-4">

<!-- 根据容器宽度响应 -->

</div>

</div>

暗色模式

<div class="bg-white dark:bg-gray-900">

<h1 class="text-gray-900 dark:text-white">

标题

</h1>

<p class="text-gray-600 dark:text-gray-400">

内容

</p>

</div>

渐变和阴影

<!-- 渐变背景 -->

<div class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">

渐变背景

</div>

<!-- 渐变文字 -->

<h1 class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">

渐变文字

</h1>

<!-- 自定义阴影 -->

<div class="shadow-[0_20px_50px_rgba(8,_112,_184,_0.7)]">

自定义阴影

</div>

动画效果

<!-- 悬停动画 -->

<div class="transform transition-all duration-300 hover:scale-105 hover:shadow-xl">

悬停放大

</div>

<!-- 加载动画 -->

<div class="animate-pulse bg-gray-200 h-4 w-32 rounded"></div>

<!-- 旋转动画 -->

<div class="animate-spin h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>

总结

TailwindCSS 提供了强大的工具来构建现代化的 UI。掌握这些高级技巧可以帮助你更高效地创建精美的界面。