Installation#

Warning

⚠️ React Tailwindcss Datepicker uses Tailwind CSS and Dayjs under the hood to work.

Supported versions#

Only react-tailwindcss-datepicker versions greater than or equal to 2.x receive bug fixes and new features. The table below lists compatibility with the different react versions:

Version	React version
2.x	19.x
1.x	17.x, 18.x

Install via npm#

1npm install react-tailwindcss-datepicker

Install via yarn#

1yarn add react-tailwindcss-datepicker

Make sure you have installed the peer dependencies as well with the below versions.

1
2{
3    // ...
4    "dayjs": "^1.11.12", 
5    "react": "^17.0.0" | "^18.0.0" | "^19.0.0"
6    // ...
7}
8

Install for react 18#

1yarn add react-tailwindcss-datepicker@1.7.3

Simple Usage#

Add the datepicker to your tailwind configuration using this code.

1
2// in your tailwind.config.js 
3module.exports = { 
4    // ... 
5    content: [ 
6        // ... 
7        "./src/**/*.{js,jsx,ts,tsx}",
8        "./node_modules/react-tailwindcss-datepicker/dist/index.esm.{js,ts}",
9        // ... 
10    ]
11    // ... 
12} 
13

Then use react-tailwindcss-select in your app:

1import { useState } from "react"; 
2import Datepicker from "react-tailwindcss-datepicker";
3
4const App = () => { 
5    const [value, setValue] = useState({ 
6        startDate: null, 
7        endDate: null
8    });
9
10    return (
11        <Datepicker 
12            value={value} 
13            onChange={newValue => setValue(newValue)}
14        /> 
15    );
16};
17
18export default App;
19

Next pageDemo