CODEWITHSUNDEEP
next.jstailwind-cssnextui
Andres Macas
Andres Macas

Reputation: 11

How to change the background color of my input with nextui?

I have a problem, I am working with NextJs, TailwindCss and NextUI, when I wanted to use the inputs I did not like the white color because it does not look good, when trying to change the color in a thousand different ways, I still have this result: Input Error I really don't know what to do anymore, here I attach the input code:

        <div className="flex flex-col h-screen bg-white-mode-background dark:bg-dark-mode-background items-center justify-center">
            <Header />
            <div className="h-fit w-fit rounded border  border-white-mode-border text-white-mode-text dark:text-dark-mode-text dark:border-dark-mode-border  items-center mt-16">
                <form onSubmit={handleSubmit} className="bg-transparent p-4">
                    <h1 className="text-1xl font-bold mb-4 text-center">Crear Evento</h1>
                    <Input placeholder="Next UI" css={{ $$inputColor: "black" }} />;
                    <Button type="submit" color="success">
                        Crear Evento
                    </Button>
                </form>
            </div>
        </div>

My tailwind.config.css content:

/** @type {import('tailwindcss').Config} */
const { nextui } = require("@nextui-org/react");
const colors = require('tailwindcss/colors')
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    colors: {
      'primary': '#464382',
      'secondary': '#8680ff',
      'accent': '#7a75ff',
      'dark-mode-border': '#212121',
      'dark-mode-navbar': '#060606',
      'dark-mode-background': '#080808',
      'dark-mode-slider': '#000000',
      'dark-mode-text': '#ffffff',
      'dark-mode-hover': '#7a75ff',
      'dark-mode-card': '#18181b',
      'dark-mode-searcher-border': '#3f3f46',

      'white-mode-border': '#e5e5e5',
      'white-mode-container': '#fff',
      'white-mode-background': '#fff',
      'white-mode-navbar': '#fff',
      'white-mode-slider': '#fff',
      'white-mode-text': '#000000',
      'white-mode-hover': '#ebebed',
      'white-mode-card': '#18181b',
      ...colors,
    }
  },
  plugins: [nextui()],
}

If anyone needs more information, don't hesitate to ask me, please help. Thanks.

I tried with this styles:

<Input
    id="eventName"
    name="eventName"
    placeholder="Nombre del evento"
    className="mb-4"
    style={{
        backgroundColor: '#18181b',
        color: '#ffffff',
        borderColor: '#ffffff',
    />
    <Input
        type="date"
        id="eventDate"
        name="eventDate"
        className="mb-4"
        style={{
            background: '#18181b',
            color: '#ffffff',
            border: 'none', 
        }}
/>

Upvotes: 1

Views: 9222

Answers (2)

Christian Grassi
Christian Grassi

Reputation: 1

NextUI Input component is using Tailwind default colors.

  • default-100 for inputWrapper background
  • default-200 for inputWrapper hover:background
  • default-600 for label foreground

So if you want to style all the Input components at once I recommend modifing the theme in tailwind.config.js or tailwind.config.ts

Upvotes: 0

Beast80K
Beast80K

Reputation: 1387

Problem :

I am working with NextJs, TailwindCSS and NextUI, when I wanted to use the inputs I did not like the white color because it does not look good, when trying to change the color in a thousand different ways ...

Solution :

NextUI Input Component has prop classNames which can be used to customize Input Component as needed.

Here's a small example code (you make necessary styling changes as required) :

<Input
    label="Search"
    radius="full"
    size='lg'
    classNames={{
      label: "text-white", 
      base: "bg-red-400",
      //behind the input
      inputWrapper: "bg-purple-500",
      // 
      innerWrapper: "bg-blue-200",
      // innerWrapper inside inputWrapper
      input: [
        "bg-green-500",
        "text-green-100",
        "placeholder:text-yellow-500",
      ],
      // input tag inside innerWrapper
    }}
    placeholder="Search something..."
 />

Please Read :

  1. Input : https://nextui.org/docs/components/input
  2. Input Custom Styles Example : https://nextui.org/docs/components/input#custom-styles

Regarding Theme :

I also saw that you are specifying, colors separately for each theme. Instead you should create themes, light & dark, inside that specify foreground, background, info, danger, warning, primary, secondary etc. colors in tailwind.config.js in theme key. Then by using next-themes library you can switch between themes.

Please Read :

  1. Theme : https://nextui.org/docs/customization/theme
  2. Dark mode : https://nextui.org/docs/customization/dark-mode
  3. next-themes Library : https://github.com/pacocoursey/next-themes
  4. Using next-themes : https://nextui.org/docs/customization/dark-mode#using-next-themes

If you have any doubts, leave a comment.

Upvotes: 0

Related Questions