Display issue for select fields

[zamson]

I'm having some styling issues with select fields. Using the example from the docs the fields does not get styled as expected. This is using tailwind, no other CSS or resets present. Any ideas?

<label class="block mt-4"> <span class="text-gray-700">Requested Limit</span> <select class="form-select mt-1 block w-full"> <option>$1,000</option> <option>$5,000</option> <option>$10,000</option> <option>$25,000</option> </select> </label>

[adamwathan]

Can you share your tailwind config, PostCSS config, and the markup for the form?

…

On Oct 24, 2019, 4:44 AM -0400, Andreas sandström ***@***.***>, wrote: I'm having some styling issues with select fields. Using the example from the docs the fields does not get styled as expected. This is using tailwind, no other CSS or resets present. Any ideas? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[zamson]

I'm using the HTML from the docs:

  <span class="text-gray-700">Requested Limit</span>
  <select class="form-select mt-1 block w-full">
    <option>$1,000</option>
    <option>$5,000</option>
    <option>$10,000</option>
    <option>$25,000</option>
  </select>
</label>

Gatsby SASS (from gatsby-config):

    {
      resolve: `gatsby-plugin-sass`,  
      options: {  
        postCssPlugins: [require('tailwindcss')('./tailwind.config.js')],  
      },  
    },

Tailwind config:

    theme: {
      extend: {
        colors: {
          'greenpeace-green': '#66CC00',
        }
      }
    },
    plugins: [
      require('@tailwindcss/custom-forms'),
    ]
  }

[adamwathan]

Make sure you install autoprefixer and add it to your PostCSS config 👍 Styling custom form elements relies on the appearance: none property which currently requires vendor prefixes in all browsers, but we don't bake those vendor prefixes into Tailwind because we don't want to force all users to support the same browsers.

    {
      resolve: `gatsby-plugin-sass`,  
      options: {  
        postCssPlugins: [
           require('tailwindcss')('./tailwind.config.js'),
           require('autoprefixer'),
        ],  
      },  
    },

[zamson]

Thanks – It's working 🥳