new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

appearance

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

appearance-none utility class

The appearance-none utility class applies appearance: none; to an element, suppressing native browser styling on form controls. It is commonly used when creating custom form components like select dropdowns and checkboxes.

appearance-auto utility class

The appearance-auto utility class applies appearance: auto; to an element, restoring the default browser-specific styling. This is useful for reverting to standard browser controls in certain accessibility modes like forced-colors.

appearance utilities CSS output

The appearance utility classes produce the following CSS: appearance-none produces appearance: none; and appearance-auto produces appearance: auto;

appearance with forced-colors variant

The forced-colors: prefix can be used with appearance utilities to conditionally apply styles when forced-colors mode is active. For example, forced-colors:appearance-auto reverts to default browser appearance when forced-colors is enabled.

appearance with responsive variants

The appearance utilities support responsive design breakpoints. You can prefix appearance utilities with responsive breakpoint variants like sm:, md:, lg:, etc. to apply different appearance values at different screen sizes.

appearance-none use case for custom select

appearance-none is typically used with a custom select dropdown by combining it with other utilities: the select element has appearance-none applied, then an SVG arrow icon is positioned absolutely over it using grid positioning to create a custom appearance.

appearance-none use case for custom checkbox

appearance-none can be used to create a custom checkbox by removing default browser styling from an input checkbox, then layering a custom SVG checkmark on top using grid positioning. The checkmark is hidden by default and shown on the checked state using peer-checked:visible.

Give your agent this brain