jargonsdev/jargons.dev
Code Quality: Fix CSS class typo - `transition-color` should be `transition-colors`
Offen
#212 geöffnet am 30.09.2025
:arrow_upper_right: medium priority:bug: buggood first issuehacktoberfest
Repository-Metriken
- Stars
- (54 Sterne)
- PR-Merge-Metriken
- (PR-Metriken ausstehend)
Beschreibung
Problem
There's a CSS class typo in the navbar component. The class transition-color should be transition-colors according to Tailwind CSS naming conventions.
Current Behavior
The navbar back button uses transition-color which is not a valid Tailwind CSS class.
Expected Behavior
Should use the correct Tailwind CSS class transition-colors for proper color transitions.
Location
File: src/components/navbar.astro
Line: 16
Current Code
<a
href={returnNav.location}
class="flex items-center w-6 h-6 justify-center bg-none hover:bg-black text-black hover:text-white rounded-full border border-black/60 transition-color ease-in-out duration-400"
>
Proposed Fix
<a
href={returnNav.location}
class="flex items-center w-6 h-6 justify-center bg-none hover:bg-black text-black hover:text-white rounded-full border border-black/60 transition-colors ease-in-out duration-400"
>
Why This Matters
transition-coloris not a valid Tailwind CSS classtransition-colorsis the correct class for transitioning color properties- This ensures the hover transition works as intended
- Improves code consistency and correctness
Tailwind CSS Reference
The correct class transition-colors applies these CSS properties:
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
Steps to Test
- Fix the class name typo
- Test the navbar back button hover effect
- Verify the color transition works smoothly
- Ensure no other functionality is affected
Additional Context
This is a good first issue because:
- ✅ Simple one-character fix
- ✅ Improves code correctness
- ✅ Easy to verify and test
- ✅ Good learning opportunity for Tailwind CSS
Definition of Done
- Change
transition-colortotransition-colors - Verify hover transition works correctly
- Test that no other functionality is broken
- Confirm the fix follows Tailwind CSS standards