Using className's (using it with tailwind)

[gmcamposano]

I am currently trying to style the DayPickerInput with Tailwind and it does not work. I have read the documentation and it doesn't seem to be integrated so what can be a good approach for this?

The current workaround, which i believe is not a good approach is using nextjs styling

import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';

export default function DatePicker() {
  return (
    <div>
      <div className="grid grid-cols-3">
        <label>From:</label>
        <DayPickerInput />            <=== I am trying to style this component using tailwind.
      </div>
      <style jsx global>
        {`
          .DayPickerInput input {
            width: 120px;
            padding: 10px;
          }
        `}
      </style>
    </div>
  );
}

[andreguerrerosilvera]

I have the same problem, any solution or suggestion for that?

[gpbl]

I am sorry, but I don't have the time to support older versions – if you need help, please make sure you work on the latest version.

[malcolm-kee]

In case anyone else wondering the same, I've added a TailwindCSS example.

Repo: https://github.com/malcolm-kee/react-day-picker-tailwind
Demo: https://react-day-picker-tailwind.netlify.app/

[gpbl]

@malcolm-kee thanks for this example. Would you mind if I copy some code from there to add it to the docs?

[malcolm-kee]

Go ahead!