jargonsdev/jargons.dev
Code Quality: Fix CSS class typo - `transition-color` should be `transition-colors`
开放
#212 创建于 2025年9月30日
:arrow_upper_right: medium priority:bug: buggood first issuehacktoberfest
仓库指标
- 星标
- (54 个星标)
- PR 合并指标
- (PR 指标待抓取)
描述
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