Roam Research Docs · Help & user documentation

Tag Styles

markdown version · view in Roam Research

• Links and tags whose name begins with a . add a css class to the roam block that they are on
  • This can be useful for Use Cases like
    • visually organizing your day if you track your time
      • Try it out
        • {{roam/css}}

          • .morning-routine {
             background-image: 
                linear-gradient(
                  hsla(4,90%,58%,0.42),
                  hsl(45,100%,51%, 0.6)
                ); 
            }
            
            .break {
               background-color: #607D8B59;
            }
            
            .increased-emotional-energy {
              border-right: 4px solid green;
            }
            
            .decreased-emotional-energy {
                border-right: 4px solid red;
            }
            
            .ramp-up {
              border-right: 4px solid;
              border-image: 
                linear-gradient(
                  to top, 
                  green, 
                  rgba(0, 0, 0, 0)
                ) 1 100%;
            }
            

      • Example Top Level of your Daily Note
        • Log
          • 06:00 - 7:00 #.morning-routine
          • 7:00 - 8:00 Great writing #.increased-emotional-energy
          • 8:00 - 8:30 Frustrating Meeting #.decreased-emotional-energy
          • 8:30 - 9:30 #.break
          • 9:30 - 10:00 Getting back in zone #.ramp-up
        • What you'll see if you hit turn on the roam/css here
  • Taken to the max, they can pretty dramatically change the layout of particular your blocks in your graph
    • {{embed-path: We decided to include some of the most useful roam/css Tag Styles we've developed for ourselves, you may find helpful/inspiring .rm-E .rm-g and .rm-hide}}
  • Roam ships with these CSS libraries built in, so you can play with classes from them right away
    • TailwindCSS
      • Blue background, white text with #.bg-blue-500 #.text-white #.bg-blue-500 #.text-white
      • #.text-xl larger text with #.text-xl
    • Blueprint
      • Card is probably the most useful by itself #.bp3-card #.bp3-card