Understanding Tags
Tags are one of Rhyme’s most delightful features - they’re special symbols that make it super easy to add colors, fonts, icons, and images to your apps. Instead of memorizing complex codes or file paths, you just use simple tags that start with special characters.
What Are Tags?
Think of tags as shortcuts or friendly nicknames for things you use often in your app. Each type of tag has its own special symbol:
- Color Tags (
#) - Add colors with tags like#red3or#blue6 - Font Tags (
^) - Apply fonts with tags like^headingor^fancy - Icon Tags (
!) - Insert icons with tags like!homeor!mdi:heart - Image Tags (
%) - Reference images with tags like%logoor%hero-banner
Why Tags Are Awesome
1. Super Easy to Remember
Instead of typing rgb(239, 68, 68) for red, you just write #red6. Instead of a long image path, you use %logo. Much simpler!
2. No More Typos
Tags are short and simple, so there’s less chance of making mistakes. The Rhyme system knows exactly what you mean when you type !home.
3. Change Once, Update Everywhere
Define a custom color like #brand-blue once, and every place you use it automatically updates if you change the definition. Same with fonts, icons, and images!
4. Works at Compile Time
Tags are processed when your app is built, not when it runs. This means your app runs fast because all the tag lookups are already done.
Quick Examples
Here’s how tags make your Rhyme code clean and readable:
// Without tags (the hard way)
.text "Welcome!" color:"rgb(59, 130, 246)" font-family:"Bebas Neue"
.button "Home" icon:"mdi:home-outline"
.image src:"/assets/images/company-logo-v2-final.png"
// With tags (the Rhyme way!)
.text "Welcome!" #blue6 ^heading
.button "Home" !home
.image %logoSee the difference? Tags make your code look like plain English!
Tag Types at a Glance
| Tag Type | Symbol | Example | What It Does |
|---|---|---|---|
| Color | # |
#red3 |
Applies a light red color |
| Font | ^ |
^title |
Uses your defined title font |
| Icon | ! |
!star |
Shows a star icon |
| Image | % |
%banner |
Displays your banner image |
Getting Started
Each tag type has its own patterns and possibilities. Dive into the specific sections to learn:
- How to use built-in tags
- How to create your own custom tags
- Best practices for organizing tags in your app
- Advanced tag techniques
Explore Each Tag Type
Ready to make your apps more colorful, stylish, and visual? Click on any tag type below to learn more:
🎨 Color Tags
Add beautiful colors with #red, #blue, #green and more. Learn about intensity levels, custom colors, and best practices for color usage.
🔤 Font Tags
Apply custom fonts with ^heading, ^body and more. Discover how to use Google Fonts and create consistent typography throughout your app.
🎯 Icon Tags
Insert icons with !home, !star, !user and more. Explore thousands of icons from popular libraries and learn how to create custom aliases.
🖼️ Image Tags
Reference images with %logo, %banner and more. Master image organization and learn best practices for managing visual assets in your app.