Missing instruction about CSS about tw-elements HOT 12 CLOSED

On NextJS I have fixed the issue by putting the import in a useEffect

useEffect(() => { import('tw-elements'); }, []);

from tw-elements.

Same issue...using React. You need to detail how to use it with React because the imports are not working

from tw-elements.

Same here with React. many CSS classes missing, like far, fa-calendar and datepicker-toggle-icon.
I'm using Tailwind 3.0 and React 17

from tw-elements.

Yeah I'm also having problems getting started with this on NextJS using TS, getting an error from /dist/js/index.min.js about document not being defined

from tw-elements.

@Victoria91 @BesavedTech @FelipeEndo

1. Have you installed the latest 1.0.0-alpha8 version?
2. Did you add the following configuration to your tailwind.config.js file?

module.exports = {
  content: ['./src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js'],
  plugins: [
    require('tw-elements/dist/plugin')
  ]
}

Especially the content part with tw-elements js file is important, because some classes are added dynamically.

from tw-elements.

Can't use the time picker in react although included all of the files as described

from tw-elements.

@emorevival Where did you put this useEffect?

from tw-elements.

@ahmetskilinc If memory serves me well I put it in my index.tsx

from tw-elements.

after a year, i still need help..
following the official guide, stuck on point 4. i don't get where TW-ELEMENTS-PATH should point to.
i'm on:

• react 18 ( without next.js nor vite )
• tailwind 3.2.7
• jsx

installed using npm, folder tw-elements is in 'node_modules' directory. so how do i point to that directory? i thought only 'src' is callable.

from tw-elements.

@wilychris ./node-modules/tw-elements/dist/js/index.min.js. Alternatively you can import library by calling import in useEffect hook in App.jsx.

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

from tw-elements.

@wilychris ./node-modules/tw-elements/dist/js/index.min.js. Alternatively you can import library by calling import in useEffect hook in App.jsx.

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

useEffect in App.jsx confirmed, tested, and works on windows chrome 109 and firefox 110.
many thanks @Trochonovitz

from tw-elements.

Hi, we just have launched bunch of integration tutorials - both with CSR and SSR frameworks. If you have more questions about integration or you still got some problems with particular components, let us know by adding new issue / topic in discussions section (if there are some unclear informations or just want let us know about something).

Next.js integration tutorial.

from tw-elements.