diff --git a/.eslintignore b/.eslintignore
deleted file mode 100644
index ec7e9b56..00000000
--- a/.eslintignore
+++ /dev/null
@@ -1,7 +0,0 @@
-# Folders
-dist/
-assets/
-styles/
-
-# Files
-README.md
\ No newline at end of file
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index a501c924..00000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
-    "root": true,
-    "env": {
-        "browser": true,
-        "es2021": true,
-        "node": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:prettier/recommended",
-        "plugin:react-hooks/recommended",
-        "next/core-web-vitals"
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "sourceType": "module"
-    },
-    "settings": {
-        "react": {
-            "version": "detect"
-        }
-    },
-    "plugins": [
-        "react",
-        "react-refresh",
-        "import",
-        "prettier",
-        "@next/eslint-plugin-next",
-        "@typescript-eslint"
-    ],
-    "rules": {
-        "indent": "off",
-        "no-console": "warn",
-        "quotes": "error",
-        "semi": "error",
-        "import/order": [
-            "error",
-            {
-                "alphabetize": {
-                    "order": "asc",
-                    "caseInsensitive": true
-                },
-                "newlines-between": "always"
-            }
-        ],
-        "react/react-in-jsx-scope": "off",
-        "react-refresh/only-export-components": "warn",
-        "react-hooks/rules-of-hooks": "error",
-        "@typescript-eslint/no-var-requires": 0,
-        "prettier/prettier": ["error", { "endOfLine": "auto" }, { "usePrettierrc": true }]
-    },
-    "overrides": [
-        {
-            "files": ["app/page.tsx"],
-            "rules": {
-                "no-console": "off"
-            }
-        }
-    ]
-}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b58a905d..83dc60e3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -3,11 +3,11 @@
 Thanks for your interest in contributing to `react-tailwindcss-datepicker`! Please take a moment to
 review this document **before submitting a pull request**.
 
--   [Pull requests](#pull-requests)
--   [Installation](#installation)
--   [Coding standards](#coding-standards)
--   [Running playground](#running-playgrounds)
--   [Before you make a Pull Request](#before-you-make-a-pull-request)
+- [Pull requests](#pull-requests)
+- [Installation](#installation)
+- [Coding standards](#coding-standards)
+- [Running playground](#running-playgrounds)
+- [Before you make a Pull Request](#before-you-make-a-pull-request)
 
 ## Pull requests
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..092b6d5d
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,103 @@
+import eslint from "@eslint/js";
+import tseslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import importPlugin from "eslint-plugin-import";
+import prettierPlugin from "eslint-plugin-prettier";
+import nextPlugin from "@next/eslint-plugin-next";
+import reactRefreshPlugin from "eslint-plugin-react-refresh";
+
+export default [
+    {
+        ignores: [
+            "dist/**",
+            "assets/**",
+            "styles/**",
+            "README.md",
+            ".next/**/*",
+            "build/**/*",
+            "node_modules/**/*",
+            ".rollup.cache/**/*",
+            "coverage/**/*"
+        ]
+    },
+    eslint.configs.recommended,
+    {
+        files: ["**/*.{js,jsx,ts,tsx}"],
+        languageOptions: {
+            parser: tsParser,
+            parserOptions: {
+                ecmaVersion: "latest",
+                ecmaFeatures: {
+                    jsx: true
+                },
+                sourceType: "module"
+            },
+            globals: {
+                window: "readonly",
+                setTimeout: "readonly",
+                clearTimeout: "readonly",
+                setInterval: "readonly",
+                clearInterval: "readonly",
+                console: "readonly",
+                document: "readonly",
+                HTMLDivElement: "readonly",
+                HTMLInputElement: "readonly",
+                HTMLButtonElement: "readonly",
+                Event: "readonly",
+                MouseEvent: "readonly",
+                TouchEvent: "readonly",
+                Node: "readonly"
+            }
+        },
+        plugins: {
+            "@typescript-eslint": tseslint,
+            react: reactPlugin,
+            "react-hooks": reactHooksPlugin,
+            import: importPlugin,
+            prettier: prettierPlugin,
+            "@next/next": nextPlugin,
+            "react-refresh": reactRefreshPlugin
+        },
+        settings: {
+            react: {
+                version: "detect"
+            }
+        },
+        rules: {
+            indent: "off",
+            "no-console": "warn",
+            quotes: "error",
+            semi: "error",
+            "import/order": [
+                "error",
+                {
+                    alphabetize: {
+                        order: "asc",
+                        caseInsensitive: true
+                    },
+                    "newlines-between": "always"
+                }
+            ],
+            "react/react-in-jsx-scope": "off",
+            "react-refresh/only-export-components": "warn",
+            "react-hooks/rules-of-hooks": "error",
+            "@typescript-eslint/no-var-requires": 0,
+            "prettier/prettier": ["error", { endOfLine: "auto" }, { usePrettierrc: true }],
+            "@typescript-eslint/no-unused-vars": ["error", {
+                "argsIgnorePattern": "^_",
+                "varsIgnorePattern": "^_",
+                "ignoreRestSiblings": true
+            }],
+            "no-unused-vars": "off",
+            "no-undef": "off"
+        }
+    },
+    {
+        files: ["app/page.tsx"],
+        rules: {
+            "no-console": "off"
+        }
+    }
+];
diff --git a/package.json b/package.json
index 01650e69..552c37c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "react-tailwindcss-datepicker",
-    "version": "2.0.0",
+    "name": "phiture-react-tailwindcss-datepicker",
+    "version": "2.0.1",
     "description": "A modern React Datepicker using Tailwind CSS 3",
     "main": "dist/index.cjs.js",
     "module": "dist/index.esm.js",
@@ -13,7 +13,7 @@
         "lint": "eslint .",
         "lint:fix": "eslint --fix .",
         "pret:fix": "prettier --write .",
-        "build": "npm run lint && npm run clean && rollup -c rollup.config.js --bundleConfigAsCjs",
+        "build": "npm run lint && npm run clean && rollup -c rollup.config.mjs --bundleConfigAsCjs",
         "pub": "npm run build && np --no-tests",
         "dev": "next dev -p 8888",
         "prepare": "husky"
@@ -23,6 +23,7 @@
         "url": "https://github.com/onesine/react-tailwindcss-datepicker"
     },
     "keywords": [
+        "phiture",
         "react-tailwindcss-datepicker",
         "react-datepicker",
         "tailwind-datepicker",
@@ -39,36 +40,36 @@
         "react": "^17.0.2 || ^18.2.0 || ^19.0.0"
     },
     "devDependencies": {
-        "@rollup/plugin-commonjs": "^28.0.2",
-        "@rollup/plugin-node-resolve": "^16.0.0",
+        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-node-resolve": "^16.0.1",
         "@rollup/plugin-typescript": "^12.1.2",
-        "@tailwindcss/forms": "^0.5.7",
-        "@types/node": "^22.3.0",
-        "@types/react": "^19.0.8",
-        "@typescript-eslint/eslint-plugin": "^8.22.0",
-        "@typescript-eslint/parser": "^8.22.0",
-        "autoprefixer": "^10.4.20",
-        "dayjs": "^1.11.12",
-        "eslint": "^8.57.0",
-        "eslint-config-next": "^15.1.6",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-prettier": "^5.2.1",
-        "eslint-plugin-react": "^7.35.0",
-        "eslint-plugin-react-hooks": "^5.1.0",
-        "eslint-plugin-react-refresh": "^0.4.18",
-        "husky": "^9.1.4",
-        "lint-staged": "^15.2.9",
-        "next": "^15.1.6",
+        "@tailwindcss/forms": "^0.5.10",
+        "@types/node": "^22.13.10",
+        "@types/react": "^19.0.12",
+        "@typescript-eslint/eslint-plugin": "^8.27.0",
+        "@typescript-eslint/parser": "^8.27.0",
+        "autoprefixer": "^10.4.21",
+        "dayjs": "^1.11.13",
+        "eslint": "^9.22.0",
+        "eslint-config-next": "^15.2.3",
+        "eslint-config-prettier": "^10.1.1",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-prettier": "^5.2.3",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.19",
+        "husky": "^9.1.7",
+        "lint-staged": "^15.5.0",
+        "next": "^15.2.3",
         "pinst": "^3.0.0",
-        "postcss": "^8.4.41",
-        "prettier": "^3.3.3",
+        "postcss": "^8.5.3",
+        "prettier": "^3.5.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "rollup": "^4.34.0",
-        "tailwindcss": "^3.4.10",
+        "rollup": "^4.36.0",
+        "tailwindcss": "^4.0.14",
         "tslib": "^2.8.1",
-        "typescript": "^5.5.4"
+        "typescript": "^5.8.2"
     },
     "lint-staged": {
         "*.{ts,tsx}": [
@@ -81,5 +82,8 @@
     },
     "files": [
         "dist"
-    ]
+    ],
+    "dependencies": {
+        "@tailwindcss/postcss": "^4.0.14"
+    }
 }
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index fe66dd61..00000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {}
-    }
-};
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 00000000..685a75c1
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,6 @@
+const config = {
+    plugins: {
+        "@tailwindcss/postcss": {}
+    }
+};
+export default config;
diff --git a/rollup.config.js b/rollup.config.mjs
similarity index 97%
rename from rollup.config.js
rename to rollup.config.mjs
index ad9af56f..c2261d98 100644
--- a/rollup.config.js
+++ b/rollup.config.mjs
@@ -2,7 +2,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import resolve from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
 
-module.exports = {
+export default {
     input: "src/index.tsx",
     output: [
         {
diff --git a/src/components/Calendar/Years.tsx b/src/components/Calendar/Years.tsx
index 5980bb25..bbf7cfb7 100644
--- a/src/components/Calendar/Years.tsx
+++ b/src/components/Calendar/Years.tsx
@@ -1,10 +1,9 @@
+import DatepickerContext from "contexts/DatepickerContext";
 import { useContext, useMemo } from "react";
 
 import { generateArrayNumber } from "../../helpers";
 import RoundedButton from "../RoundedButton";
 
-import DatepickerContext from "contexts/DatepickerContext";
-
 interface Props {
     year: number;
     currentYear: number;
diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
index d1b60fb3..a0c97df1 100644
--- a/src/components/Calendar/index.tsx
+++ b/src/components/Calendar/index.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { DateType } from "types";
 
 import { START_WEEK } from "../../constants";
 import DatepickerContext from "../../contexts/DatepickerContext";
@@ -27,8 +28,6 @@ import Months from "./Months";
 import Week from "./Week";
 import Years from "./Years";
 
-import { DateType } from "types";
-
 const NUMBER_YEARS_SHOW = 12;
 const CALENDAR_SIZE = 42;
 
diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
index 044bde2b..7a1c5813 100644
--- a/src/components/Datepicker.tsx
+++ b/src/components/Datepicker.tsx
@@ -110,7 +110,7 @@ const Datepicker = (props: DatepickerType) => {
         if (arrow && div && div.classList.contains("block")) {
             div.classList.remove("block");
             div.classList.remove("translate-y-0");
-            div.classList.remove("opacity-1");
+            div.classList.remove("opacity-100");
             div.classList.add("translate-y-4");
             div.classList.add("opacity-0");
             setTimeout(() => {
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index a05a2744..25cd910b 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -249,7 +249,7 @@ const Input = () => {
                     div.classList.remove("translate-y-4");
                     div.classList.remove("opacity-0");
                     div.classList.add("translate-y-0");
-                    div.classList.add("opacity-1");
+                    div.classList.add("opacity-100");
                 }, 1);
             }
         }
diff --git a/src/components/Shortcuts.tsx b/src/components/Shortcuts.tsx
index 5fbeea23..326f4598 100644
--- a/src/components/Shortcuts.tsx
+++ b/src/components/Shortcuts.tsx
@@ -74,7 +74,6 @@ const ItemTemplate = memo((props: ItemTemplateProps) => {
         <li
             className={getClassName()}
             onClick={() => {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 chosePeriod(props?.item.period);
             }}
diff --git a/src/constants/index.ts b/src/constants/index.ts
index ad84e869..a335758e 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -182,42 +182,42 @@ export const TEXT_COLOR: Colors = {
 
 export const BORDER_COLOR: Colors = {
     500: {
-        blue: "border-blue-500",
-        orange: "border-orange-500",
-        yellow: "border-yellow-500",
-        red: "border-red-500",
-        purple: "border-purple-500",
-        amber: "border-amber-500",
-        lime: "border-lime-500",
-        green: "border-green-500",
-        emerald: "border-emerald-500",
-        teal: "border-teal-500",
-        cyan: "border-cyan-500",
-        sky: "border-sky-500",
-        indigo: "border-indigo-500",
-        violet: "border-violet-500",
-        fuchsia: "border-fuchsia-500",
-        pink: "border-pink-500",
-        rose: "border-rose-500"
+        blue: "border-[var(--color-blue-500)]",
+        orange: "border-[var(--color-orange-500)]",
+        yellow: "border-[var(--color-yellow-500)]",
+        red: "border-[var(--color-red-500)]",
+        purple: "border-[var(--color-purple-500)]",
+        amber: "border-[var(--color-amber-500)]",
+        lime: "border-[var(--color-lime-500)]",
+        green: "border-[var(--color-green-500)]",
+        emerald: "border-[var(--color-emerald-500)]",
+        teal: "border-[var(--color-teal-500)]",
+        cyan: "border-[var(--color-cyan-500)]",
+        sky: "border-[var(--color-sky-500)]",
+        indigo: "border-[var(--color-indigo-500)]",
+        violet: "border-[var(--color-violet-500)]",
+        fuchsia: "border-[var(--color-fuchsia-500)]",
+        pink: "border-[var(--color-pink-500)]",
+        rose: "border-[var(--color-rose-500)]"
     },
     focus: {
-        blue: "focus:border-blue-500",
-        orange: "focus:border-orange-500",
-        yellow: "focus:border-yellow-500",
-        red: "focus:border-red-500",
-        purple: "focus:border-purple-500",
-        amber: "focus:border-amber-500",
-        lime: "focus:border-lime-500",
-        green: "focus:border-green-500",
-        emerald: "focus:border-emerald-500",
-        teal: "focus:border-teal-500",
-        cyan: "focus:border-cyan-500",
-        sky: "focus:border-sky-500",
-        indigo: "focus:border-indigo-500",
-        violet: "focus:border-violet-500",
-        fuchsia: "focus:border-fuchsia-500",
-        pink: "focus:border-pink-500",
-        rose: "focus:border-rose-500"
+        blue: "focus:border-[var(--color-blue-500)]",
+        orange: "focus:border-[var(--color-orange-500)]",
+        yellow: "focus:border-[var(--color-yellow-500)]",
+        red: "focus:border-[var(--color-red-500)]",
+        purple: "focus:border-[var(--color-purple-500)]",
+        amber: "focus:border-[var(--color-amber-500)]",
+        lime: "focus:border-[var(--color-lime-500)]",
+        green: "focus:border-[var(--color-green-500)]",
+        emerald: "focus:border-[var(--color-emerald-500)]",
+        teal: "focus:border-[var(--color-teal-500)]",
+        cyan: "focus:border-[var(--color-cyan-500)]",
+        sky: "focus:border-[var(--color-sky-500)]",
+        indigo: "focus:border-[var(--color-indigo-500)]",
+        violet: "focus:border-[var(--color-violet-500)]",
+        fuchsia: "focus:border-[var(--color-fuchsia-500)]",
+        pink: "focus:border-[var(--color-pink-500)]",
+        rose: "focus:border-[var(--color-rose-500)]"
     }
 };
 
diff --git a/styles/globals.css b/styles/globals.css
index b5c61c95..f1d8c73c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
diff --git a/tailwind.config.js b/tailwind.config.js
index 799ff6ee..c3c0127e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,9 @@
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
     content: ["./app/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}"],
     darkMode: "media",
-    theme: {},
-    variants: {},
-    /* eslint-disable @typescript-eslint/no-require-imports */
+    theme: {
+        extend: {}
+    },
     plugins: [require("@tailwindcss/forms")]
-    /* eslint-enable @typescript-eslint/no-require-imports */
 };