Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an example using tailwind #1720

Closed
gpbl opened this issue Mar 8, 2023 · 5 comments · Fixed by #2175
Closed

Add an example using tailwind #1720

gpbl opened this issue Mar 8, 2023 · 5 comments · Fixed by #2175
Assignees
Labels
Type: Documentation Documentation only changes
Milestone

Comments

@gpbl
Copy link
Owner

gpbl commented Mar 8, 2023

Some developers are wondering how to use tailwindcss with DayPicker.

@malcolm-kee proposed a solution here:

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

but we could add it to the documentation.

@gpbl gpbl added the Type: Documentation Documentation only changes label Mar 8, 2023
@ialexanderbrito
Copy link

ialexanderbrito commented Mar 21, 2023

Thanks examples @gpbl

@vixeven
Copy link

vixeven commented Apr 27, 2023

@shadcn's UI components library also uses react-day-picker:

https://ui.shadcn.com/docs/components/calendar

@gpbl gpbl added this to the v9.0.0 milestone Aug 18, 2023
@gpbl gpbl changed the title Add example using tailwind Add an example using tailwind Aug 18, 2023
@tyeetale
Copy link

I would also love to get the caption_layout version because the above examples only show the nav buttons but do not select month and year. For whatever reason, I've been struggling with disabling the aria-hidden="true" divs within the calendar forked from shadcn.

Screenshot 2023-11-14 at 16 06 24
Screenshot 2023-11-14 at 16 06 50

@tyeetale
Copy link

Actually nevermind. Again it was a tailwind issue on creating caption labels.
Screenshot 2023-11-14 at 16 19 32

@gpbl
Copy link
Owner Author

gpbl commented May 31, 2024

Closing this as DayPicker 9 is in beta and comes up with a simplified HTML tree and UI elements: the changes will allow an easier and solid customization via TailwindCSS.

See the example here:
https://react-day-picker.js.org/next/using-daypicker/styling#tailwind-css

Try the beta and let me know if it works for you - and if not! Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Documentation Documentation only changes
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants