Hey! Welcome to kama sona, an enterprise-class, open source, and free platform for managing groups, resources, and assignments. This repository and its files have a lot of useful components and CSS classes in them that you won't know unless you spend hours perusing through the source files. However, this file compiles it all into an easily readable document. Without further ado, here we go.
If you're trying to make a button, input field, or dropdown, use .field. It
adds background, border, hover, and focus styles for many types of elements. It
also makes textareas vertically resizable, handles placeholder colors, and works
well in dark mode.
It also has a sibling class called .active, which makes the background and
border blue to mark the element as "activated." This can be used for filters and
checkboxes.
.field uses a border style of border-slate-300 dark:border-slate-600, which
is aliased to border-standard for convenience. These borders are dark enough
to show up when needed, but aren't intrusive to the user experience. To match
the border and ring styles of .field when an element is focused, add
.ring-color to your elements. To match them even when an element isn't
focused, use .ring-color-initial. You'll also need to add the ring class at
the appropriate time.
To style links, add the .link class to them. It makes an element blue and
shows an underline upon hovering or focusing. It can also be used on buttons. To
keep the underline styles but omit the blue color, use .link-colorless.
To show text when an element is hovered over, add the data-tooltip attribute
to it. It makes the applied element position: relative and adds content in the
::before pseudo element. The tooltip respects the current text color.
When making focus states, use the focus: Tailwind modifier. It automatically
combines :focus-visible and :focus-within, which is the preferred behavior
in most circumstances. Specifically, it matches
&:focus-visible, &:focus-within:not(:focus).