How to install the tailwind elements in reactjs?

Question

How to install the tailwind elements in reactjs?

1k Views Asked by AlexMoshi At 20 October 2024 at 12:47

I saw another question about installing tailwind elements in nextjs project. How to install the tailwind elements in nextjs? I followed it on my react project.It doesn't work. How can use tailwind elements in react project?

import React, { useEffect } from "react";
// import "tw-elements";

const Stepper = () => {
  useEffect(() => {
    const use = async () => {
      await import("tw-elements");
    };
    use();
  }, []);

  return (
    <>
      <ul
        className="stepper"
        data-mdb-stepper="stepper"
        data-mdb-stepper-type="vertical"
      >
        <li className="stepper-step stepper-active">
          <div className="stepper-head">
            <span className="stepper-head-icon"> 1 </span>
            <span className="stepper-head-text"> step1 </span>
          </div>
          <div className="stepper-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </div>
        </li>
        <li className="stepper-step">
          <div className="stepper-head">
            <span className="stepper-head-icon"> 2 </span>
            <span className="stepper-head-text"> step2 </span>
          </div>
          <div className="stepper-content">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </div>
        </li>
        <li className="stepper-step">
          <div className="stepper-head">
            <span className="stepper-head-icon"> 3 </span>
            <span className="stepper-head-text"> step3 </span>
          </div>
          <div className="stepper-content">
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.
          </div>
        </li>
      </ul>
    </>
  );
};

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/tw-elements/dist/js/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tw-elements/dist/plugin")],
};

The code above is what i write to stepper. It work sometime, but sometime it doesn't . stepper-content is never hided or never showed. Am i did something wrong? Thank you

Original Q&A

There are 1 best solutions below

**MohamedZh** · Answer 1

As stated in this link, you should import tw-elements in a useEffect in the _app file, not in the same component that you use them in.

/_app.jsx/tsx

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const use = async () => {
      (await import('tw-elements')).default;
    };
    use();
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

There is also another solution to use the _document.js file and Script element to use the script for tw_elements

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

// import 'tw-elements';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <Script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"/>
      </body>
    </Html>
  )
}

but I don't recommend it as _document.js will be replaced soon in the upcoming updates for NextJS

How to install the tailwind elements in reactjs?

There are 1 best solutions below

Related Questions in REACTJS

Related Questions in TAILWIND-CSS

Related Questions in TAILWIND-ELEMENTS

Trending Questions

Popular # Hahtags

Popular Questions