Tailtips Roadmap
Refactoring
✅ Published
11 - Grid [grid-template-columns:1fr_auto]
- Color scheme
- Aspect-Ratio
- Scroll margin and padding
- List image
- Text Balance
- Viewport (dvh instead of screen)
- Inset instead of top-0 right-0 bottom-0 left-0
- Size utilities
- Space utilities
- Use of * and **
Use of
⌛️ In Progress
11 - File : style input:file
- Marker : style list-marker
- Selection : highlight selected text
- Data-attribute : style based on data-attributes
- Visited : style a link if it has already been visited
- Target : style an element if it’s id matches the url
- Last, First and Only
- Checked and Indeterminate
- Autofill
- Out of Range
- In Range
✅ Published
6 - Enabled and Disabled
- Container
- Focus Within and Focus visible
- Odd and Even
- Peer variant
- Has variant
How To Create
⌛️ In Progress
25 - Gradient Text
- Scaling Container
- Stripes
- Dotted background
- Blur background
- Animated Navbar without js
- Fancy Button (use before instead of box-shadow)
- In - Out scaling underline
- Logical Properties
- Margin Auto (responsive)
- Glassmorphism
- Snap Scroll
- Mix Blend
- HTML anchor target (top)
- Animated Arrow Icon
- Input with Icon
- Semantic Colors
- Mid Container
- Animated Hamburger Icon
- Bonus (dark mode in css)
- Realist shadow (css)
- A Color strategy
- Native dialog
- Dark Light mode through css variables and data attributes
- Colored underline
✅ Published
7 - Gradient borders
- Stacked avatars with transparent background
- Perfect inner-outer border radius
- Opacity focus (when hover navlinks only the current link has 100 opacity and the others 50)
- Autosizing Textarea
- Sidebar Layout
- Floating labels input
When To Use
⌛️ In Progress
7 - arbitrary values
- Sr-only (accessibility)
- Css Variables and Theme function
- Max width, min width, max height, and min height
- Container Queries
- Calc function
- Drop shadow
Mistakes to Avoid
⌛️ In Progress
2 - Important (`!utility`)
- Using % unit in width for container elements