Display issue for select fields about tailwindcss-custom-forms HOT 4 CLOSED

tailwindlabs commented on June 15, 2024

Display issue for select fields

from tailwindcss-custom-forms.

Comments (4)

adamwathan commented on June 15, 2024 3

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'),
        ],  
      },  
    },

from tailwindcss-custom-forms.

adamwathan commented on June 15, 2024

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.

from tailwindcss-custom-forms.

zamson commented on June 15, 2024

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'),
    ]
  }

from tailwindcss-custom-forms.

zamson commented on June 15, 2024

Thanks – It's working 🥳

from tailwindcss-custom-forms.

Recommend Projects

Display issue for select fields about tailwindcss-custom-forms HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent