DEV Community

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

Collapse
chema profile image
José María CL

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 options.

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
ms_yogii profile image
Yogini Bende Author

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