CSS
Using the styles
The classes and helpers meant for your own markup: buttons, form controls, prose, knobs and variants.
Most classes belong to the helper that renders them. A few are meant for your own markup, so a link, a
Rails *_tag field or a block of Markdown can match the components.
Buttons
button_classes returns the class string, so the look works with link_to,
button_to and form.submit alike. Variants are :default,
:primary, :ghost, :danger and :icon; sizes are
:small and :large.
<%= link_to "New label", new_label_path, class: button_classes(:primary) %>
<%= button_to "Archive", archive_path(@label), class: button_classes(:ghost, size: :small) %>Form controls
The form builder styles its own controls. Rails' *_tag helpers are left alone, and
control_classes is how to opt one in. Kinds are :input, :text_area,
:password, :date, :select, :check and
:radio. A size: sits a box level with a button of the same size.
<%= search_field_tag :q, params[:q], class: control_classes(:input, size: :small) %>
Both follow config.control_class and config.submit_class, so an app with its own
form styles gets its own classes back.
Prose
UnmagicProse styles server-rendered Markdown: headings, lists, code, quotes and tables. Render
and sanitise the HTML yourself. Mark anything inside it that should keep its own look with
not-prose.
<div class="UnmagicProse"><%= sanitize Markdown.render(@note.body) %></div>Visually hidden text
UnmagicVisuallyHidden hides text on screen and keeps it for screen readers, like Tailwind's
sr-only.
Sortable variants
The file adds variants for a sortable item's drag states, so markup can decorate them with utilities:
sortable-dragging, sortable-placeholder, sortable-lifted,
sortable-active and sortable-over.
<li class="sortable-dragging:rotate-2 sortable-placeholder:opacity-40">…</li>