Search code examples
csstailwind-cssdaisyui

Tailwind change text color in all input elements

So I have the following code in several places across the app:

<label className="input text-neutral-content">
   Name
   <input type="text" className="grow text-base-content"/>
</label>

I know that the idea behind tailwind is inline styling but is there a way to define the text color of label and input globally so I don't have to repeat the text-neutral-content and text-base-content in each and every input field?

Solution

  • Yes Sure. in your global.css file you can your default styles like this:

    @tailwind base;
@tailwind components;
@tailwind utilities;

    @layer base {
      h1 {
        @apply text-2xl;
      }
      h2 {
        @apply text-xl;
      }
    
      input {
       @apply text-base-content
      }
      /* ... */
    }

    You can read more here: https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer