This content originally appeared on DEV Community and was authored by RG Global x htmllessons
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.
This content originally appeared on DEV Community and was authored by RG Global x htmllessons
RG Global x htmllessons | Sciencx (2025-04-24T22:36:34+00:00) Tailwind CSS v4 Crash Course – Build from Scratch!. Retrieved from https://www.scien.cx/2025/04/24/tailwind-css-v4-crash-course-build-from-scratch/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.