DEV Community

15 Days of Tailwind Tips Series' Articles

Back to Ruqaiya Beguwala's Series
Day 1: How to Center Anything in Tailwind CSS (Horizontally + Vertically)
Cover image for Day 1: How to Center Anything in Tailwind CSS (Horizontally + Vertically)
ruqaiya_beguwala profile

Day 1: How to Center Anything in Tailwind CSS (Horizontally + Vertically)

#tailwindcss #ui
2
Comments
3 min read
Day 2: Tailwind CSS Color System — Semantic, Scalable & Simple
Cover image for Day 2: Tailwind CSS Color System — Semantic, Scalable & Simple
ruqaiya_beguwala profile

Day 2: Tailwind CSS Color System — Semantic, Scalable & Simple

#tailwindcss #ui #webdev
Comments
4 min read
Day 3: Button Styling in Tailwind CSS — Create Beautiful Buttons in One Line
Cover image for Day 3: Button Styling in Tailwind CSS — Create Beautiful Buttons in One Line
ruqaiya_beguwala profile

Day 3: Button Styling in Tailwind CSS — Create Beautiful Buttons in One Line

#tailwindcss #webdev
4
Comments
3 min read
Day 4: How to Build a Responsive Grid Layout in Tailwind CSS
Cover image for Day 4: How to Build a Responsive Grid Layout in Tailwind CSS
ruqaiya_beguwala profile

Day 4: How to Build a Responsive Grid Layout in Tailwind CSS

#tailwindcss #webdev #ui
1
Comments
4 min read
Day 5: Add Hover Transitions in Tailwind CSS Without Writing Any Custom CSS
Cover image for Day 5: Add Hover Transitions in Tailwind CSS Without Writing Any Custom CSS
ruqaiya_beguwala profile

Day 5: Add Hover Transitions in Tailwind CSS Without Writing Any Custom CSS

Comments
3 min read
Day 6: Mastering Responsive Typography in Tailwind CSS
Cover image for Day 6: Mastering Responsive Typography in Tailwind CSS
ruqaiya_beguwala profile

Day 6: Mastering Responsive Typography in Tailwind CSS

1
Comments 1
3 min read
Day 7: How to Create Reusable Tailwind CSS Components Using @apply
Cover image for Day 7: How to Create Reusable Tailwind CSS Components Using @apply
ruqaiya_beguwala profile

Day 7: How to Create Reusable Tailwind CSS Components Using @apply

1
Comments
3 min read
Day 8: How to Add Custom Shadows and Depth in Tailwind CSS
Cover image for Day 8: How to Add Custom Shadows and Depth in Tailwind CSS
ruqaiya_beguwala profile

Day 8: How to Add Custom Shadows and Depth in Tailwind CSS

#tailwindcss #webdev #ui
3
Comments
3 min read
Day 9: Create a Glassmorphism UI in Tailwind CSS (Step-by-Step)
Cover image for Day 9: Create a Glassmorphism UI in Tailwind CSS (Step-by-Step)
ruqaiya_beguwala profile

Day 9: Create a Glassmorphism UI in Tailwind CSS (Step-by-Step)

#tailwindcss #webdev #ui
1
Comments
3 min read
Day 10: How to Create a Sticky Header Using Tailwind CSS
Cover image for Day 10: How to Create a Sticky Header Using Tailwind CSS
ruqaiya_beguwala profile

Day 10: How to Create a Sticky Header Using Tailwind CSS

#webdev #tailwindcss #ui
Comments
3 min read
Day 11: How to Create Animated Spinners Using Tailwind CSS
Cover image for Day 11: How to Create Animated Spinners Using Tailwind CSS
ruqaiya_beguwala profile

Day 11: How to Create Animated Spinners Using Tailwind CSS

#webdev #tailwindcss #ui
1
Comments
4 min read
Day 12: How to Add Dark Mode in Tailwind CSS (The Right Way)
Cover image for Day 12: How to Add Dark Mode in Tailwind CSS (The Right Way)
ruqaiya_beguwala profile

Day 12: How to Add Dark Mode in Tailwind CSS (The Right Way)

#webdev #tailwindcss #ui
3
Comments
3 min read
Day 13: How to Use Aspect Ratio in Tailwind CSS (Perfect for Responsive Images & Videos)
Cover image for Day 13: How to Use Aspect Ratio in Tailwind CSS (Perfect for Responsive Images & Videos)
ruqaiya_beguwala profile

Day 13: How to Use Aspect Ratio in Tailwind CSS (Perfect for Responsive Images & Videos)

#tailwindcss #webdev #ui
1
Comments
3 min read
Day 14: Animate on Hover with Tailwind CSS (Scale, Rotate, and More)
Cover image for Day 14: Animate on Hover with Tailwind CSS (Scale, Rotate, and More)
ruqaiya_beguwala profile

Day 14: Animate on Hover with Tailwind CSS (Scale, Rotate, and More)

#webdev #tailwindcss #ui
Comments
3 min read
Day 15: Build a Fully Responsive Card Component Using Tailwind CSS
Cover image for Day 15: Build a Fully Responsive Card Component Using Tailwind CSS
ruqaiya_beguwala profile

Day 15: Build a Fully Responsive Card Component Using Tailwind CSS

Comments
4 min read