Tailwind CSS Appearance

The appearance property enables developers to control how native UI elements, such as form controls, are rendered by the browser. By default, many of these elements come with a platform-specific style. The appearance property can be used to either preserve or remove these default styles.

Tailwind CSS abstracts this functionality through appearance-none and appearance-auto utilities. In this guide, we will learn how to work with these utilities in Tailwind CSS.

Overview of Appearance

Adding the appearance-none

To reset the default browser styling of an element, use the appearance-none utility. This is mostly used while creating form components.

export default function App() {
  return <h1>Hello world</h1>
}

States and Responsiveness

Hover and Focus States

Tailwind allows you to conditionally apply the appearance classes on certain states like hover and focus. Use Tailwind's state modifiers like- hover, focus, etc. to apply the utility only when these states are active, e.g., hover:appearance-none.

export default function App() {
  return <h1>Hello world</h1>
}

Breakpoint Modifiers

Tailwind CSS provides breakpoint modifiers to conditionally apply the appearance utility only when the screen hits the defined breakpoint. This is especially helpful for applying effects only on specific screens. Use Tailwind's breakpoint modifiers like- sm, md, etc., to apply the utility only on these breakpoints and above, e.g., sm:appearance-auto.

export default function App() {
  return <h1>Hello world</h1>
}

Real World Examples

Select Menu

A stylish dropdown menu component for a travel booking application with custom appearance styling.

export default function App() {
  return <h1>Hello world</h1>
}

File Upload

A modern file upload component with drag and drop functionality and custom-styled input elements.

export default function App() {
  return <h1>Hello world</h1>
}

Form Fields

A set of beautifully styled form inputs with custom appearance modifications for a job application form.

export default function App() {
  return <h1>Hello world</h1>
}

Video Player

A sleek video player interface with custom controls and appearance modifications.

export default function App() {
  return <h1>Hello world</h1>
}

Rating Input

A modern rating system with customizable emojis and detailed feedback form, perfect for product reviews or feedback collection.

export default function App() {
  return <h1>Hello world</h1>
}