Skip to main content

Styling with Tailwind CSS

You can use tailwind in classes (cheatsheet).
Our color palette (same as app) can be found in the theme file: github, (local).

  • Use pre-defined tailwind classes (cheatsheet)
  • Use our pre-defined values: bg-brand-1000
  • Use custom adhoc values: text-[#60C69C], max-w-[50%]
  • Prefixes: hover:, dark:, light:, ...
  • Target children [&>span]:p-3, [&_*]:hidden, ...

Example:​

#60C69C hover me 
<span class="bg-[#60C69C] text-[white] text-sm">#60C69C</span>
<span class="bg-brand-1000 hover:bg-warning-1000 text-xl">hover me</span>
<Icon className="invert-[50%]" icon="Sun" />

HTML​

Standard html elements can be styled using the class property.

Example:​

Glarg blibberous squelch. Hello World! Lorem ipsum dolor sit amet.

<p class="max-w-[50%] border border-warning-700 border-solid p-3">
  Glarg blibberous squelch.
  <span class="text-success-1000">Hello</span> <span class="text-info-1000">World</span>!
  Lorem ipsum dolor sit amet.
  <img class="block m-auto" src="/img/logo-dark.svg"/>
</p>

Custom Components​

Custom components come with className property for styling.

Dynamic styling with prefixes​

You can use the dark: and light: prefixes to style based on the current theme. This can further be combined with pseudo-classes like hover:, e.g. dark:hover:text-warning-800.

Try changing the theme to see the effect and hover over the icon.

<Icon icon="Sun" className="dark:hidden hover:text-warning-800 cursor-default" />
<Icon icon="Moon" className="light:hidden hover:text-info-800 cursor-default" />

Styling children​

Given the following html structure of the component, we can target children using the css selector relative from the parent.

In short, CSS3 selectors:

  • div p selects all <p> elements inside a <div> element.
  • div > p selects all <p> elements where the parent is a <div> element.
  • div + p selects the first <p> element that are placed immediately after <div> elements.

Tailwind doesn't support spaces in class names and it replaces it with _, and & for the current element (the parent).

  • &_p, &>p, &+p
<div>         // parent (&)
  <div>
    <img />   // [&_img] or [&>div>img]
  </div>
  <div>
    <h3>{label}</h3>      // [&_h3]
    <p>{description}</p>  // [&_p] or [&_h3+p]
  </div>
</div>

Show code

label

description

label

description