set default styles for inputs

[ghost]

so I want to set a global styling for inputs, such as input border, placeholder and etc. where would I do this? I was reading this: https://tailwindcss.com/docs/placeholder-color/#usage but I have to apply this class to every input, any suggestions?

[ghost]

ok so I created global.css and added this:

@tailwind base;
input {
    @apply placeholder-black;
}

but I am getting this error:

(3:5) `@apply` cannot be used with `.placeholder-black` because `.placeholder-black` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.placeholder-black`
exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

[adamwathan]

Hey! Sorry you picked an annoying one to start with 😬 Right now Tailwind doesn't support using @apply with classes that include pseudo-selectors under the hood and the placeholder utilities are defined like this:

.placeholder-black::placeholder { color: black }

(Notice the ::placeholder pseudo selector)

So in this case the best approach is to target the placeholder pseudo-selector yourself and apply a text color utility or even use the theme function:

// Option 1
input::placeholder {
  @apply text-black
}

// Option 2
input::placeholder {
  color: theme('colors.black')
}

You could also consider using the custom forms plugin and generating classes like .form-input for your inputs instead of styling them globally, in case you ever find yourself in a situation where you need to style one input in a way that's different than your global styles and don't want to wrestle to override those styles.