In this post we will look at:
- Typography/Styling
- Animation/Filters
- Advanced Features
- Pro Features
- Tailwind v4 features
- Practice
and much more...
We'll cover practice examples and advanced features at the end, so stay tuned!
Styling/Typography
Font (size, color, weight)
<div class="text-lg text-blue-500 font-bold">
Large blue bold text
</div>
Spacing (margin, padding, borders)
<div class="m-4 p-2 border-2 border-gray-300">
Element with margin, padding and border
</div>
Colors
<div class="bg-red-500 text-white hover:bg-red-600">
Red background with white text
</div>
Width and Height
<div class="w-full h-32 md:w-1/2">
Responsive width and fixed height
</div>
Containers/Animation
Flex and Grids
<div class="flex justify-between items-center">
<div>Flex item 1</div>
<div>Flex item 2</div>
</div>
<div class="grid grid-cols-3 gap-4">
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
</div>
Containers
<div class="container mx-auto px-4">
Centered container with padding
</div>
Transitions and Animations
<button class="transition-all duration-300 transform hover:scale-110">
Hover to scale
</button>
Effects and Filters
<img class="blur-sm hover:blur-none transition-all" src="image.jpg" alt="Blurred image">
Advanced Features
Hover, Focus, Before, After...
<button class="hover:bg-blue-600 focus:ring-2 focus:ring-blue-300">
Interactive button
</button>
Responsive Design - media queries
<div class="text-sm md:text-base lg:text-lg">
Responsive text size
</div>
Dark Mode
<div class="dark:bg-gray-800 dark:text-white">
Dark mode compatible element
</div>
@apply and module.scss
.custom-button {
@apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded;
}
Tailwind Config
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#1234ff'
}
}
}
}
Custom Utilities
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'128': '32rem'
}
}
}
}
iframe and video
<div class="aspect-w-16 aspect-h-9">
<iframe src="video-url" class="w-full h-full"></iframe>
</div>
Tailwind v4 features
Practice
Check full video where I done this project - https://www.youtube.com/watch?v=D9kRwAeQAYs
Conclusion
An awesome tool for quickly building pet projects and gaining practical experience.