Installation#

Warning

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

Install via npm#

$ npm install react-tailwindcss-datepicker

Install via yarn#

$ yarn add react-tailwindcss-datepicker

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

"dayjs": "^1.11.6" 
"react": "^18.2.0"

Simple Usage#

Add the datepicker to your tailwind configuration using this code.

// in your tailwind.config.js 
module.exports = { 
// ... 
content: [ 
"./src/**/*.{js,jsx,ts,tsx}","./node_modules/react-tailwindcss-datepicker/dist/index.esm.js",// ... 
}

Then use react-tailwindcss-select in your app:

import React, {useState} from "react"; 
import Datepicker from "react-tailwindcss-datepicker"; 

const App = () => { 
const [value, setValue] = useState({ 
startDate: new Date(), 
endDate: new Date().setMonth(11) 
}); 

const handleValueChange = (newValue) => {console.log("newValue:", newValue); 
setValue(newValue); 
} 

return (<Datepicker 
value={value} 
onChange={handleValueChange} 
/> 
);}; 
export default App;

Next pageDemo