Dark Mode Setup
Enable class-based dark mode in tailwind.config.ts:
hljs ts
export default {
darkMode: 'class',
// ...
}
Glassmorphism
hljs html
<div class=\"bg-white/10 backdrop-blur-md border border-white/20 rounded-xl p-6\">
Glass card content
</div>
Gradient
Text
hljs html
<h1 class=\"bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-transparent\">
Gradient Heading
</h1>
Responsive
Grid
hljs html
<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">
<!-- cards -->
</div>
Custom Animations
hljs ts
//
tailwind.config.ts
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-20px)' },
},
},
animation: {
float: 'float 6s ease-in-out infinite',
},
These patterns form the foundation of modern, polished UI design.
