css Question posted in
Some basic documentation can be found here.

Css – 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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    You can use ‘@apply’ to append your class to an existing Tailwind class. You can add it in your CSS file, something like this:

    .label {
    @apply input text-neutral-content;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search