How to use tailwind with react-day-picker?

Question

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>
  );
}

Answer 1

Try to apply your styles like below

.DayPickerInput {
  @apply w-full;
}
.DayPickerInput input {
  @apply py-1 w-full px-2 text-base text-gray-700 bg-white rounded-xl outline-none focus:ring-0  transition duration-200 border-gray-400 border focus:border-primary-800;
}