3

I am trying to get the Datepicker tailwind elements component to work in React, but for some reason it is not triggering: https://tailwind-elements.com/docs/standard/forms/datepicker/

I have followed the steps in the tailwind elements quick start guide: https://tailwind-elements.com/quick-start/

Here is my current set up:

tailwind.config.js:

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}', './node_modules/tw-elements/dist/js/**/*.js', './public/index.html'],
  plugins: [require('tailwind-scrollbar-hide'), require('tw-elements/dist/plugin')],
};

craco.config.js:

module.exports = {
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')]
    }
  }
};

index.js:

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './state/store';
import { Provider } from 'react-redux';
import 'tw-elements'; 

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

I have also tried the following:

  1. Importing 'tw-elements' in my top level App.js file as well as the actual component I'm using the datepicker in.
  2. Linking the script in my index.html as it mentions in the quick start guide. I have tried linking it in the following ways:
<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
<script src="../node_modules/tw-elements/dist/js/index.min.js"></script>
<script src="./index.min.js"></script> // after copying the file into the same directory as index.html

The styles for the datepicker get applied, but the javascript code to pop up the datepicker just doesn't seem to be getting triggered. Any thoughts on what the issue could be? Let me know if anymore information would be helpful.

buckeyeguyy
  • 121
  • 8
  • 1
    Having the same problem, still dont know how to make it work – Jay Hyber Nov 02 '22 at 02:28
  • 2
    @JayHyber yeah I never got it working, so I ended up moving on from it. It's been awhile but I think I found a comment on a YouTube video or something indicating that it just can't work in React at the moment. – buckeyeguyy Nov 02 '22 at 19:27
  • Looks like there's a well-known problem with TW-elements' datepicker and timepicker components. The example shown in the documentation doesn't work right away with Angular, React, Vue.js, or Nest.js builds. – thiout_p Feb 09 '23 at 15:38
  • 1
    As of May 2023, the official example works: https://tailwind-elements.com/docs/standard/integrations/react-integration/ – Fedorov7890 May 04 '23 at 12:29

0 Answers0