Missing instruction about CSS

[Victoria91]

Hello, thanks for the library! I've followed your instructions from here, but could not get the date picker to work. As I've inspected, it requires some specific CSS, so could you specify the correct way to include all necessary styles?

Thanks

[ErnestDaDev]

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

[FelipeEndo]

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

[emorevival]

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

[smolenski-mikolaj]

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

[emorevival]

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

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

[hamzahejaz]

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

[ahmetskilinc]

@emorevival Where did you put this useEffect?

[emorevival]

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

[wilychris]

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.

[Trochonovitz]

@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();
  }, []);

[wilychris]

@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

[Trochonovitz]

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.