Question 411763 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Custom styles or creating a shared component

We’re about to start a Next.js project using Tailwind for styling. We’re fairly new to both technologies but we’ve started to pull together the UI and so far so good. However, we’re seeing a lot of replication in styling. For example every text box has the same set of Tailwind styling applied to it.

To reduce that duplication of styling I think we’ve got two options:

  1. Use custom styles in Tailwind
  2. Create a text box component which is passed the name, id etc. to use and contains the styles

My question is, is breaking down text boxes into a component too fine grained? I’ve got an eye on down the line where things may get more complicated – for example supporting show/hide password options, input masks etc. and that component may become very heavy.

I’m leaning towards the answer being custom styles in tailwind but I wanted to ask other peoples opinions.

Thanks in advance.

Tags:

2

Answers


  1. 0

    You can do anything that you want in next.js, and pay attention ‘each answer that you recieve is a personal advice from another developers and it can be completely optional’.

    for me:

    • Whenever I want to seperate my codes for creating a re-usable component, I’m creating a UI directory for my buttons, inputs, and everything related to our design system. After that I’ll managing the required props for them, and extra options that I need to handle in another place for using the component.

    • In my opinion, you don’t need create a custom component for each element that you have in your design. If it is a common element, create a component. If it isn’t, just use it everywhere that you need and create everything so simple.

    • I love tailwind. It is a nice tool for creating UI. But now I don’t use it directly. Because you need to put it classes everywhere! I prefer using a powerful UI framework. for example in my opinion, Chakra UI is a fully customizable, powerful, and simple tool that I can works on it. It is so simple, and makes my project small. You don’t need to put tailwind classes in your component, you just call the component that you need, config it in the configuration and boom! that’s done. You can change anything that you want in Chakra’s components.

    • And in my opinion, if you are repeating anything in a react project, it can be handle in a better way. Just find the best option that you have. If you need create custom component, do it. If you need handle something in just a place, do not! If you have a function that you need it in several places, create a custom hook for it. and so on…

    Login or Signup to reply.
  2. 0

    The official Tailwind documentation has guidelines on this question. They recommend reusing styles in the form of components rather than by combining styles.

    If you need to reuse some styles across multiple files, the best strategy is to create a component if you’re using a front-end framework like React, Svelte, or Vue, or a template partial if you’re using a templating language like Blade, ERB, Twig, or Nunjucks.

    Unless a component is a single HTML element, the information needed to define it can’t be captured in CSS alone. For anything even remotely complex, the HTML structure is just as important as the CSS.

    You can wrap <input /> to just add the default styles and keep the rest of the input and return. This way your component can be modified at the finest level of granularity.

    import { DetailedHTMLProps, InputHTMLAttributes } from "react";

export default function MyStylizedInput({className, ...props}: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) {
  return <input {...props} className={`bg-transparent ${className}`} />
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search