docs: add Tailwind CSS example (#2175)

* Update styling docs

* Export getDefaultClassNames helper

examples/TailwindCSS.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+
+export function TailwindCSS() {
+  const defaultClassNames = getDefaultClassNames();
+  return (
+    <>
+      <style>
+        {`
+        .bg-amber-500 { background-color: #f59e0b; }
+        .border-amber-500 { border-color: #f59e0b; }
+        .text-white { color: #fff; }
+        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
+        .p-5 { padding: 1.25rem; }
+        .fill-amber-500 { fill: #f59e0b; }
+        `}
+      </style>
+      <DayPicker
+        mode="single"
+        classNames={{
+          today: `border-amber-500`,
+          selected: `bg-amber-500 border-amber-500 text-white`,
+          calendar: `${defaultClassNames.calendar} bg-white shadow-lg p-5`,
+          chevron: `${defaultClassNames.chevron} fill-amber-500`
+        }}
+      />
+    </>
+  );
+}

examples/index.ts

@@ -50,6 +50,7 @@ export * from "./Start";
 export * from "./StylingCss";
 export * from "./StylingInline";
 export * from "./StylingModifiers";
+export * from "./TailwindCSS";
 export * from "./Testcase1567";
 export * from "./TestCase2047";
 export * from "./WeekIso";

src/UI.ts

@@ -1,12 +1,8 @@
 /**
  * The UI elements composing DayPicker.
  *
- * These elements are mapped to the components directory.
- */
-/**
- * The UI elements composing DayPicker.
- *
- * These elements are mapped to the components directory.
+ * These elements are mapped to the classnames used by DayPicker. Use the
+ * `classNames` prop to customize the classnames.
  */
 export enum UI {
   /** The previous button in the navigation. */

src/helpers/index.ts

@@ -0,0 +1,2 @@
+// Only export helpers that can be useful to other developers.
+export * from "./getDefaultClassNames";

src/index.ts

@@ -4,6 +4,7 @@ export * from "./classes";
 export * from "./components/custom-components";
 export * from "./contexts";
 export * from "./formatters";
+export * from "./helpers";
 export * from "./labels";
 export * from "./types-deprecated";
 export * from "./types";

website/docs/using-daypicker/styling.mdx

@@ -6,11 +6,11 @@ sidebar_position: 2
 
 DayPicker comes with a minimal style inspired by MacOS date pickers, designed to be extended and customized.
 
-You can also use your own styles, or use a CSS framework like [Tailwind CSS](https://tailwindcss.com) or [Bootstrap](https://getbootstrap.com) to style the calendar.
+You can also use your own styles, or use a CSS framework like [Tailwind CSS](https://tailwindcss.com) or [Bootstrap](https://getbootstrap.com) utilities to style the calendar.
 
 ## Default Style
 
-To start with the included styles, import `react-day-picker/style.css` into your app. This will add the `.rdp` class names used by DayPicker.
+To start with the included styles, add the `react-day-picker/style.css` to your HTML document. This will add the `.rdp` class names used by DayPicker.
 
 <details>
 <summary>Using a bundler or a React framework</summary>
@@ -23,24 +23,18 @@ import "react-day-picker/style.css";
 
 </details>
 
-### Importing the CSS Module
-
-You can import `style.module.css` if you want your CSS pre-processor to parse it. Pass the imported styles to the `classNames` prop.
-
-```tsx title="./MyDatePicker.jsx"
-import { DayPicker } from "react-day-picker";
-import styles from "react-day-picker/style.module.css";
+<details>
+<summary>Copying the CSS file</summary>
 
-console.log(styles); // Output the class names as parsed by CSS modules.
+If you are not using a bundler, you can copy the CSS file to your project. See [style.css](/~https://github.com/gpbl/react-day-picker/blob/main/src/style.css) in the DayPicker repository for the source.
 
-export function MyDatePicker() {
-  return <DayPicker classNames={styles} />;
-}
+```html title="./public/index.html"
+<style>
+  /* Copy the content of the style.css file here. */
+</style>
 ```
 
-<BrowserWindow>
-  <Examples.CssModules />
-</BrowserWindow>
+</details>
 
 ### CSS Variables
 
@@ -104,28 +98,81 @@ To toggle between dark and light appearance, override the accent color with the
 }
 ```
 
-## Custom Style
+### Importing the CSS Module
 
-Use the `classNames` prop to use other classnames instead of the default ones.
+You can import `style.module.css` if you want your CSS pre-processor to parse it. Pass the imported styles to the `classNames` prop.
 
-### Tailwind CSS
+```tsx title="./MyDatePicker.jsx"
+import { DayPicker } from "react-day-picker";
+import styles from "react-day-picker/style.module.css";
 
-...
+console.log(styles); // Output the class names as parsed by CSS modules.
 
-### Custom CSS
+export function MyDatePicker() {
+  return <DayPicker classNames={styles} />;
+}
+```
 
-...
+<BrowserWindow>
+  <Examples.CssModules />
+</BrowserWindow>
+## Custom Class Names
 
-### Inline Styles
+Use the `classNames` prop to use other classnames instead of the default ones. The [`ClassNames`](../api/type-aliases/ClassNames.md) type lists all the class names used by DayPicker. They are the value of the [`UI`](../api/enumerations/UI.md), [`DayModifiers`](../api/enumerations/DayModifier.md) and [`CalendarFlag`](../api/enumerations/CalendarFlag.md) enums.
 
-To change the appearance of any DayPicker element via inline-styles use the `styles` prop.
+For example, to change the class name of the calendar container:
+
+```tsx
+<DayPicker classNames={{ calendar: "my-calendar" }} />
+```
+
+Or the disabled days:
+
+```jsx
+<DayPicker classNames={{ disabled: "my-disabled_style" }} />
+```
+
+### Tailwind CSS
 
-:::warning
+If you are including [Tailwind CSS](https://tailwindcss.com) in your project, use the Tailwind CSS class names to style the calendar.
 
-Mouse hover effects cannot be styled inline.
+- Add to the `classNames` the class names you want to override.
+- Extend the default class names with [`getDefaultClassNames`](../api/functions//getDefaultClassNames.md).
+- Read [`style.css`](/~https://github.com/gpbl/react-day-picker/blob/main/src/style.css) from source and get familiar with the [UI elements](../using-daypicker/anatomy.mdx).
+
+```tsx
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+
+export function MyCalendar() {
+  const defaultClassNames = getDefaultClassNames();
+  return (
+    <DayPicker
+      mode="single"
+      classNames={{
+        today: `border-amber-500`, // Add a border to today's date
+        selected: `bg-amber-500 border-amber-500 text-white`, // Highlight the selected day
+        calendar: `${defaultClassNames.calendar} shadow-lg p-5` // Add a shadow to the calendar
+        chevron: `${defaultClassNames.chevron} fill-amber-500` // Change the color of the chevron
+      }}
+    />
+  );
+}
+```
+
+<BrowserWindow>
+  <Examples.TailwindCSS />
+</BrowserWindow>
+
+:::info TailwindCSS-only CSS
+
+We currently don't have a CSS file _completely_ written in TailwindCSS. If you want, you can help us to create one to include in the docs here. [Open a thread](/~https://github.com/gpbl/react-day-picker/discussions/new?category=ideas)
 
 :::
 
+## Inline Styles
+
+To change the appearance of any DayPicker element via inline-styles use the `styles` prop.
+
 ```tsx
 const monthCaptionStyle = {
   borderBottom: "1px solid currentColor",