DEV Community

Discussion on: Getting started with Tailwind and React: A simple login form tutorial.

View post

Replies for: Nice! I think this is a great utility to build our own components without spending time creating our CSS as the project demands. It's good to have ...

Collapse
 
chema profile image
José María CL •

BTW, In the last code snnipet you imported the components in this way:

import { PrimaryButton } from '../components/FormElements/Button';
import Input from '../components/FormElements/Input';
Enter fullscreen mode Exit fullscreen mode

I would recommend to export them all using an index.js file in favor of a cleaner way to import them.

// Supose we have this modules
- components
  |- form-elements
    |- primary-button
    |- input
    |- index.js
  |- index.js
- pages
Enter fullscreen mode Exit fullscreen mode 
// components/form-items/index.js
export * from "primary-button";
export { default as Input } from "input";
Enter fullscreen mode Exit fullscreen mode 
// components/index.js
export * as FormItems from "form-items";
Enter fullscreen mode Exit fullscreen mode

So you can import them in one of these ways

import FormItems from "../components";

return (
  <div>
    <FormItems.Input />
    <FormItems.PrimaryButton />
  <div>
);

// or
import { PrimaryButton, Input  } from "../components/form-items";

return (
  <div>
    <Input />
    <PrimaryButton />
  <div>
);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hey_yogini profile image
Yogini Bende •

Thanks Jose. That's a good catch. I sometimes avoid creating index.js for small projects. But surely, that makes code more cleaner.