Tailwind CSS v4 is faster and more powerful. Let's look at advanced customization and patterns.
Using CSS Keyframes
You can define custom animations directly in your CSS configuration.
globals.css
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.animate-float {
animation: float 3s ease-in-out infinite;
}Writing Plugins
Plugins let you register new styles for Tailwind to inject into the user's stylesheet using JavaScript.
tailwind.config.js
plugin(class="text-purple-400 font-medium">function({ addUtilities }) {
addUtilities({
'.text-shadow': {
textShadow: '2px 2px 4px rgba(0,0,0,0.1)',
}
})
})Tailwind CSSCSSFrontend