Installation#

Warning

⚠️ React Tailwindcss Datepicker uses Tailwind CSS 3 (with the @tailwindcss/forms plugin) & Dayjs under the hood to work.

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.6", 
5    "react": "^18.2.0" 
6    // ...
7}
8

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