Tailwind Forms breaks `appearance-none` class

[ben519]

What version of @tailwindcss/forms are you using?

0.5.7

What version of Node.js are you using?

20.9.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/ben519/tailwind-select-bug

Describe your issue

I'm using the <Select> component from Catalyst. It includes the appearance-none class.

Without Tailwind Forms Plugin

Without the tailwind forms plugin, things work as expected.

// tailwind.config.js

const headlessuiPlugin = require('@headlessui/tailwindcss')

const config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter, sans-serif', { fontFeatureSettings: '"cv11"' }],
      },
    },
  },
  plugins: [headlessuiPlugin],
}
/** @type {import('tailwindcss').Config} */
module.exports = config

With Tailwind Forms Plugin

With the tailwind forms plugin, the down chevron reappears.

// tailwind.config.js

const headlessuiPlugin = require('@headlessui/tailwindcss')
const formsPlugin = require('@tailwindcss/forms')

const config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter, sans-serif', { fontFeatureSettings: '"cv11"' }],
      },
    },
  },
  plugins: [headlessuiPlugin, formsPlugin],
}
/** @type {import('tailwindcss').Config} */
module.exports = config

[adamwathan]

Hey! The forms plugin adds opinionated styles to form elements, including adding a background-image to add a custom chevron to <select> elements. If you look at the styles, the forms plugin actually already applies appearance: none to the <select> element to remove the default icon and replace it with a custom one.

If you want to remove the custom chevron when using the forms plugin on a per-element basis, you have two options:

1. Use the class strategy so form styles are opt-in, then you don't have to undo any form styles, instead you just don't add the class.
2. Use the bg-none class to remove the background image.

Most importantly though you should not use the @tailwindcss/forms plugin with Catalyst, it will create conflicts. Catalyst already comes with its own form styles applied to each component, and doesn't depend on that plugin to work.

Hope that helps!

[ben519]

Most importantly though you should not use the @tailwindcss/forms plugin with Catalyst

Ah, this is what I missed. Thanks!

FYI, this came about because I was trying to add Catalyst to the Pocket template. In other words, I didn't exactly add the the @tailwindcss/forms plugin; it was already baked into the template. I assume I'm not the only person making this error.

[adamwathan]

@ben519 Ah that's good to know! Maybe we can update the Pocket template to not depend on the forms plugin then, I don't think there's much going on in that template that really would use it.

[ben519]

@adamwathan More victims here and here 😆

[adamwathan]

@adamwathan More victims here and here 😆

Nah those people just forgot to install the forms plugin. (I'm wrong!)

Yep 😄