Search code examples
reactjstailwind-cssnextui

How can I Change Font Size of Next UI Input Field?

I'm currently working on a project that involves React, Tailwind CSS, and Next UI. In the project, I've integrated an Input field from Next UI, but I'm facing an issue with changing (increasing) the font size of this particular field.

Here's a snippet of the code I'm using:

<Input
    type="text"
    label="Type your word here"
    labelPlacement="inside"
    className='w-full sm:w-1/3 my-5 bg-transparent m-0 '
    variant='underlined'
    size='lg'
    description="Type the word you want to search for."
    style={{fontSize: '1.5rem'}}
/>

I've tried adjusting the fontSize property directly, but it doesn't seem to have the desired effect. Any insights or solutions on how to customize the font size for the Next UI Input field in this context would be greatly appreciated.

enter image description here

Solution

  • A quick look at the large input variant with my browser's inspector reveals that it employs the text-medium class, which in turn uses the --nextui-font-size-medium custom property. You can override either one of these using standard methods, or you can apply a custom class with a superseding selector, like so:

    .text-medium.custom-input-lg {
  font-size: 24px;
}

    Which is appropriate may depend on the nuances of your build process and app structure.