Skip to content

DEV Community

15 Days of Tailwind Tips Series' Articles

Back to Ruqaiya Beguwala's Series

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

Ruqaiya Beguwala

Jul 14

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

#tailwindcss #ui

3 min read

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

Ruqaiya Beguwala

Jul 15

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

#tailwindcss #ui #webdev

4 min read

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

Ruqaiya Beguwala

Jul 16

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

#tailwindcss #webdev

3 min read

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

Ruqaiya Beguwala

Jul 17

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

#tailwindcss #webdev #ui

4 min read

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

Ruqaiya Beguwala

Jul 18

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

3 min read

Cover image for Day 6: Mastering Responsive Typography in Tailwind CSS

Ruqaiya Beguwala

Jul 19

Day 6: Mastering Responsive Typography in Tailwind CSS

3 min read

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

Ruqaiya Beguwala

Jul 20

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

3 min read

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

Ruqaiya Beguwala

Jul 21

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

#tailwindcss #webdev #ui

3 min read

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

Ruqaiya Beguwala

Jul 22

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

#tailwindcss #webdev #ui

3 min read

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

Ruqaiya Beguwala

Jul 23

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

#webdev #tailwindcss #ui

3 min read

Cover image for Day 11: How to Create Animated Spinners Using Tailwind CSS

Ruqaiya Beguwala

Jul 24

Day 11: How to Create Animated Spinners Using Tailwind CSS

#webdev #tailwindcss #ui

4 min read

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

Ruqaiya Beguwala

Jul 25

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

#webdev #tailwindcss #ui

3 min read

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

Ruqaiya Beguwala

Jul 26

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

#tailwindcss #webdev #ui

3 min read

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

Ruqaiya Beguwala

Jul 27

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

#webdev #tailwindcss #ui

3 min read

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

Ruqaiya Beguwala

Jul 28

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

4 min read