Closed
Description
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

Metadata
Metadata
Assignees
Labels
No labels