jargonsdev / jargonsdev/jargons.dev
Code Quality: Fix CSS class typo - `transition-color` should be `transition-colors`
- Dominant language
- MDX
- Stars
- 56
- Forks
- 45
- PR merge metrics
- No merged PRs in 30d
Description
## **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**
```astro
```
## **Proposed Fix**
```astro
```
## **Why This Matters**
- `transition-color` is not a valid Tailwind CSS class
- `transition-colors` is 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:
```css
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**
1. Fix the class name typo
2. Test the navbar back button hover effect
3. Verify the color transition works smoothly
4. 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-color` to `transition-colors`
- [ ] Verify hover transition works correctly
- [ ] Test that no other functionality is broken
- [ ] Confirm the fix follows Tailwind CSS standards
Contributor guide
Assessment
This issue has not been assessed yet.