rm prettier, tailwindcss and eslint package

login/.eslintrc.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
-  // This tells ESLint to load the config from the package `@zitadel/eslint-config`
+  // Use basic ESLint config since the login app has its own detailed config
-  extends: ["@zitadel/eslint-config"],
+  extends: ["eslint:recommended"],
   settings: {
     next: {
       rootDir: ["apps/*/"],

login/apps/login/.eslintrc.cjs

@@ -1,7 +1,15 @@
 module.exports = {
-  extends: ["next/core-web-vitals"],
+  parser: "@babel/eslint-parser",
+  extends: ["next", "prettier"],
   rules: {
+    "@next/next/no-html-link-for-pages": "off",
     "@next/next/no-img-element": "off",
     "react/no-unescaped-entities": "off"
-  }
+  },
+  parserOptions: {
+    requireConfigFile: false,
+    babelOptions: {
+      presets: ["next/babel"],
+    },
+  },
 };

login/apps/login/.eslintrc.standalone.cjs

@@ -1,7 +0,0 @@
-module.exports = {
-  extends: ["next/core-web-vitals"],
-  rules: {
-    "@next/next/no-img-element": "off",
-    "react/no-unescaped-entities": "off"
-  }
-};

login/apps/login/README.standalone.md

@@ -1,123 +0,0 @@
-# ZITADEL Login UI - Standalone
-
-This is the standalone version of the ZITADEL Login UI, a Next.js application that provides the authentication interface for ZITADEL.
-
-## Quick Start
-
-### Prerequisites
-
-- Node.js 18+
-- npm or pnpm
-
-### Setup
-
-1. **Prepare the standalone environment:**
-
-   ```bash
-   ./prepare-standalone.sh --install
-   ```
-
-   Or for manual control:
-
-   ```bash
-   ./prepare-standalone.sh --no-install
-   npm install
-   ```
-
-2. **Start development server:**
-
-   ```bash
-   npm run dev
-   ```
-
-3. **Build for production:**
-   ```bash
-   npm run build:standalone
-   npm run start
-   ```
-
-## Development
-
-### Available Scripts
-
-- `npm run dev` - Start development server with Turbopack
-- `npm run build` - Build for production
-- `npm run build:standalone` - Build standalone version with custom base path
-- `npm run start` - Start production server
-- `npm run test:unit` - Run unit tests
-- `npm run lint` - Run linting
-- `npm run lint:fix` - Fix linting issues
-
-### Environment Variables
-
-Create a `.env.local` file with your ZITADEL configuration:
-
-```env
-ZITADEL_API_URL=https://your-zitadel-instance.com
-# Add other required environment variables
-```
-
-### Package Management
-
-This standalone version automatically uses the latest published versions of:
-
-- `@zitadel/client` - ZITADEL client library (latest)
-- `@zitadel/proto` - ZITADEL protocol definitions (latest)
-
-To update to the latest versions, simply run:
-
-```bash
-npm update @zitadel/client @zitadel/proto
-```
-
-## Differences from Monorepo Version
-
-This standalone version includes:
-
-- **Published packages**: Uses latest published versions of `@zitadel/client` and `@zitadel/proto`
-- **Self-contained configuration**: All configuration files are standalone-ready
-- **Simplified dependencies**: Removes monorepo-specific devDependencies and tooling
-- **Streamlined build scripts**: Optimized scripts for standalone development
-- **Independent dependency management**: No workspace or turbo dependencies
-
-## Architecture
-
-### Dual-Mode Design
-
-This project supports both monorepo and standalone modes:
-
-- **Monorepo mode**: Uses `workspace:*` dependencies for local development
-- **Standalone mode**: Uses published npm packages for distribution
-
-### Automatic Conversion
-
-The conversion between modes is handled by intelligent scripts:
-
-1. **`prepare-standalone.sh`**: Main conversion script for end users
-2. **`scripts/prepare-standalone.js`**: Advanced preparation with latest package versions
-3. **`scripts/build-standalone.js`**: Generates standalone configs without modifying current setup
-4. **`scripts/config-manager.js`**: Switches between monorepo and standalone configurations
-
-## Contributing
-
-When contributing to this standalone version:
-
-1. Make changes in the main monorepo first
-2. Test changes in the monorepo environment
-3. Update the standalone version via subtree push
-4. Test the standalone version independently
-
-## Subtree Sync
-
-This repository is maintained as a Git subtree of the main ZITADEL repository.
-
-To sync changes from the main repo:
-
-```bash
-# In the main ZITADEL repo
-git subtree push --prefix=login/apps/login origin typescript-login-standalone
-```
-
-## License
-
-See the main ZITADEL repository for license information.

login/apps/login/package.json

@@ -47,6 +47,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.23.0",
     "@bufbuild/buf": "^1.53.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -57,20 +58,23 @@
     "@types/tinycolor2": "1.4.3",
     "@types/uuid": "^10.0.0",
     "@vercel/git-hooks": "1.0.0",
-    "@zitadel/eslint-config": "workspace:*",
-    "@zitadel/prettier-config": "workspace:*",
-    "@zitadel/tailwind-config": "workspace:*",
     "@zitadel/tsconfig": "workspace:*",
     "autoprefixer": "10.4.21",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "15.4.0-canary.86",
+    "eslint-config-prettier": "^9.1.0",
     "grpc-tools": "1.13.0",
     "jsdom": "^26.1.0",
     "lint-staged": "15.5.1",
     "make-dir-cli": "4.0.0",
     "postcss": "8.5.3",
+    "prettier": "^3.2.5",
+    "prettier-plugin-organize-imports": "^3.2.0",
     "prettier-plugin-tailwindcss": "0.6.11",
     "sass": "^1.87.0",
     "tailwindcss": "3.4.14",
     "ts-proto": "^2.7.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vitest": "^2.0.0"
   }
 }

login/apps/login/package.standalone.json

@@ -37,6 +37,7 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.23.0",
     "@bufbuild/buf": "^1.53.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -46,9 +47,13 @@
     "@types/tinycolor2": "1.4.3",
     "@types/uuid": "^10.0.0",
     "autoprefixer": "10.4.21",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "15.4.0-canary.86",
+    "eslint-config-prettier": "^9.1.0",
     "jsdom": "^26.1.0",
     "postcss": "8.5.3",
     "prettier": "^3.2.5",
+    "prettier-plugin-organize-imports": "^3.2.0",
     "prettier-plugin-tailwindcss": "0.6.11",
     "sass": "^1.87.0",
     "tailwindcss": "3.4.14",

login/apps/login/prettier.config.mjs

@@ -1,8 +1,11 @@
 export default {
-  semi: true,
-  trailingComma: "all",
-  singleQuote: false,
   printWidth: 80,
   tabWidth: 2,
-  plugins: ["prettier-plugin-tailwindcss"],
+  useTabs: false,
+  semi: true,
+  singleQuote: false,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  arrowParens: 'always',
+  plugins: ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
 };

login/apps/login/prettier.config.standalone.mjs

@@ -1,8 +0,0 @@
-export default {
-  semi: true,
-  trailingComma: "all",
-  singleQuote: false,
-  printWidth: 80,
-  tabWidth: 2,
-  plugins: ["prettier-plugin-tailwindcss"],
-};

login/apps/login/scripts/prepare-standalone.js

@@ -13,21 +13,6 @@ const CONFIG_FILES = [
         source: 'tsconfig.standalone.json',
         target: 'tsconfig.json',
         required: true
-    },
-    {
-        source: '.eslintrc.standalone.cjs',
-        target: '.eslintrc.cjs',
-        required: false
-    },
-    {
-        source: 'prettier.config.standalone.mjs',
-        target: 'prettier.config.mjs',
-        required: false
-    },
-    {
-        source: 'tailwind.config.standalone.mjs',
-        target: 'tailwind.config.mjs',
-        required: false
     }
 ];
 
@@ -54,8 +39,8 @@ async function prepareStandalone() {
             throw new Error('package.standalone.json not found!');
         }
 
-        // Step 2: Copy configuration files
+        // Step 2: Copy TypeScript configuration
-        console.log('\n⚙️  Setting up configuration files...');
+        console.log('\n⚙️  Setting up TypeScript configuration...');
         for (const config of CONFIG_FILES) {
             try {
                 const sourceExists = await fs.access(config.source).then(() => true).catch(() => false);
@@ -94,6 +79,9 @@ async function prepareStandalone() {
         console.log('   2. Run: npm run dev');
         console.log('   3. Start developing!\n');
 
+        console.log('ℹ️  Note: ESLint, Prettier, and Tailwind configs are now unified');
+        console.log('   - No separate standalone config files needed!');
+
     } catch (error) {
         console.error('\n❌ Failed to prepare standalone version:', error.message);
         console.error('Please check the error above and try again.\n');

login/apps/login/tailwind.config.mjs

@@ -1,16 +1,184 @@
+import colors from "tailwindcss/colors";
+
+// Generate dynamic theme colors
+let themeColors = {
+  background: { light: { contrast: {} }, dark: { contrast: {} } },
+  primary: { light: { contrast: {} }, dark: { contrast: {} } },
+  warn: { light: { contrast: {} }, dark: { contrast: {} } },
+  text: { light: { contrast: {} }, dark: { contrast: {} } },
+  link: { light: { contrast: {} }, dark: { contrast: {} } },
+};
+
+const shades = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"];
+const themes = ["light", "dark"];
+const types = ["background", "primary", "warn", "text", "link"];
+
+types.forEach((type) => {
+  themes.forEach((theme) => {
+    shades.forEach((shade) => {
+      themeColors[type][theme][shade] = `var(--theme-${theme}-${type}-${shade})`;
+      themeColors[type][theme][`contrast-${shade}`] =
+        `var(--theme-${theme}-${type}-contrast-${shade})`;
+      themeColors[type][theme][`secondary-${shade}`] =
+        `var(--theme-${theme}-${type}-secondary-${shade})`;
+    });
+  });
+});
+
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+  darkMode: "class",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+  future: {
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    hoverOnlyWhenSupported: true,
-  ],
+  },
   theme: {
     extend: {
-      colors: {
+      // https://vercel.com/design/color
-        background: "var(--background)",
+      fontSize: {
-        foreground: "var(--foreground)",
+        "12px": "12px",
+        "14px": "14px",
       },
+      colors: {
+        gray: colors.zinc,
+        // Dynamic theme colors
+        ...themeColors,
+        // State colors
+        state: {
+          success: {
+            light: {
+              background: "#cbf4c9",
+              color: "#0e6245",
+            },
+            dark: {
+              background: "#68cf8340",
+              color: "#cbf4c9",
+            },
+          },
+          error: {
+            light: {
+              background: "#ffc1c1",
+              color: "#620e0e",
+            },
+            dark: {
+              background: "#af455359",
+              color: "#ffc1c1",
+            },
+          },
+          neutral: {
+            light: {
+              background: "#e4e7e4",
+              color: "#000000",
+            },
+            dark: {
+              background: "#1a253c",
+              color: "#ffffff",
+            },
+          },
+          alert: {
+            light: {
+              background: "#fbbf24",
+              color: "#92400e",
+            },
+            dark: {
+              background: "#92400e50",
+              color: "#fbbf24",
+            },
+          },
+        },
+        divider: {
+          dark: "rgba(135,149,161,.2)",
+          light: "rgba(135,149,161,.2)",
+        },
+        input: {
+          light: {
+            label: "#000000c7",
+            background: "#00000004",
+            border: "#1a191954",
+            hoverborder: "1a1b1b",
+          },
+          dark: {
+            label: "#ffffffc7",
+            background: "#00000020",
+            border: "#f9f7f775",
+            hoverborder: "#e0e0e0",
+          },
+        },
+        button: {
+          light: {
+            border: "#0000001f",
+          },
+          dark: {
+            border: "#ffffff1f",
+          },
+        },
+      },
+      backgroundImage: ({ theme }) => ({
+        "dark-vc-border-gradient": `radial-gradient(at left top, ${theme(
+          "colors.gray.800",
+        )}, 50px, ${theme("colors.gray.800")} 50%)`,
+        "vc-border-gradient": `radial-gradient(at left top, ${theme(
+          "colors.gray.200",
+        )}, 50px, ${theme("colors.gray.300")} 50%)`,
+      }),
+      animation: {
+        shake: "shake .8s cubic-bezier(.36,.07,.19,.97) both;",
+      },
+      keyframes: ({ theme }) => ({
+        rerender: {
+          "0%": {
+            ["border-color"]: theme("colors.pink.500"),
+          },
+          "40%": {
+            ["border-color"]: theme("colors.pink.500"),
+          },
+        },
+        highlight: {
+          "0%": {
+            background: theme("colors.pink.500"),
+            color: theme("colors.white"),
+          },
+          "40%": {
+            background: theme("colors.pink.500"),
+            color: theme("colors.white"),
+          },
+        },
+        shimmer: {
+          "100%": {
+            transform: "translateX(100%)",
+          },
+        },
+        translateXReset: {
+          "100%": {
+            transform: "translateX(0)",
+          },
+        },
+        fadeToTransparent: {
+          "0%": {
+            opacity: 1,
+          },
+          "40%": {
+            opacity: 1,
+          },
+          "100%": {
+            opacity: 0,
+          },
+        },
+        shake: {
+          "10%, 90%": {
+            transform: "translate3d(-1px, 0, 0)",
+          },
+          "20%, 80%": {
+            transform: "translate3d(2px, 0, 0)",
+          },
+          "30%, 50%, 70%": {
+            transform: "translate3d(-4px, 0, 0)",
+          },
+          "40%, 60%": {
+            transform: "translate3d(4px, 0, 0)",
+          },
+        },
+      }),
     },
   },
   plugins: [require("@tailwindcss/forms")],

login/apps/login/tailwind.config.standalone.mjs

@@ -1,17 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-      },
-    },
-  },
-  plugins: [require("@tailwindcss/forms")],
-};

login/package.json

@@ -33,8 +33,6 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.2",
     "@vitejs/plugin-react": "^4.4.1",
-    "@zitadel/eslint-config": "workspace:*",
-    "@zitadel/prettier-config": "workspace:*",
     "axios": "^1.8.4",
     "dotenv": "^16.5.0",
     "dotenv-cli": "^8.0.0",

login/packages/zitadel-client/package.json

@@ -65,7 +65,6 @@
   "devDependencies": {
     "@bufbuild/protocompile": "^0.0.1",
     "@bufbuild/buf": "^1.53.0",
-    "@zitadel/tsconfig": "workspace:*",
+    "@zitadel/tsconfig": "workspace:*"
-    "@zitadel/eslint-config": "workspace:*"
   }
 }

login/packages/zitadel-eslint-config/CHANGELOG.md

@@ -1,13 +0,0 @@
-# @zitadel/eslint-config
-
-## 0.1.1
-
-### Patch Changes
-
-- README updates
-
-## 0.1.0
-
-### Minor Changes
-
-- f32ab7f: Initial release

login/packages/zitadel-eslint-config/README.md

@@ -1,35 +0,0 @@
-# ZITADEL ESLint Config
-
-This package provides the ESLint configuration used by ZITADEL projects. It includes a set of rules and plugins to ensure consistent code quality and style across all ZITADEL codebases.
-
-## Installation
-
-To install the package, use npm or yarn:
-
-```sh
-npm install @zitadel/eslint-config
-```
-
-or
-
-```sh
-yarn add @zitadel/eslint-config
-```
-
-## Usage
-
-To use the ESLint configuration in your project, extend it in your `.eslintrc` file:
-
-```js
-{
-  "extends": "@zitadel/eslint-config"
-}
-```
-
-## Documentation
-
-For detailed documentation and configuration options, please refer to the [ESLint documentation](https://eslint.org/docs/user-guide/configuring).
-
-## Contributing
-
-Contributions are welcome! Please read the contributing guidelines before getting started.

login/packages/zitadel-eslint-config/index.js

@@ -1,13 +0,0 @@
-module.exports = {
-  parser: "@babel/eslint-parser",
-  extends: ["next", "turbo", "prettier"],
-  rules: {
-    "@next/next/no-html-link-for-pages": "off",
-  },
-  parserOptions: {
-    requireConfigFile: false,
-    babelOptions: {
-      presets: ["next/babel"],
-    },
-  },
-};

login/packages/zitadel-eslint-config/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@zitadel/eslint-config",
-  "version": "0.1.1",
-  "main": "index.js",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@typescript-eslint/parser": "^7.9.0",
-    "eslint-config-next": "^14.2.18",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-turbo": "^2.0.9",
-    "eslint-plugin-react": "^7.34.1",
-    "@babel/eslint-parser": "^7.25.9"
-  }
-}

login/packages/zitadel-prettier-config/CHANGELOG.md

@@ -1,13 +0,0 @@
-# @zitadel/prettier-config
-
-## 0.1.1
-
-### Patch Changes
-
-- README updates
-
-## 0.1.0
-
-### Minor Changes
-
-- f32ab7f: Initial release

login/packages/zitadel-prettier-config/README.md

@@ -1,36 +0,0 @@
-# ZITADEL Prettier Config
-
-This package provides the Prettier configuration used by ZITADEL projects. It includes a set of formatting rules to ensure consistent code style across all ZITADEL codebases.
-
-## Installation
-
-To install the package, use npm or yarn:
-
-```sh
-npm install @zitadel/prettier-config
-```
-
-or
-
-```sh
-yarn add @zitadel/prettier-config
-```
-
-## Usage
-
-To use the Prettier configuration in your project, extend it in your `prettier.config.js` file:
-
-```js
-module.exports = {
-  ...require("@zitadel/prettier-config"),
-  // Add your custom configurations here
-};
-```
-
-## Documentation
-
-For detailed documentation and configuration options, please refer to the [Prettier documentation](https://prettier.io/docs/en/configuration.html).
-
-## Contributing
-
-Contributions are welcome! Please read the contributing guidelines before getting started.

login/packages/zitadel-prettier-config/index.js

@@ -1,11 +0,0 @@
-export default {
-  printWidth: 80,
-  tabWidth: 2,
-  useTabs: false,
-  semi: true,
-  singleQuote: false,
-  trailingComma: 'all',
-  bracketSpacing: true,
-  arrowParens: 'always',
-  plugins: ["prettier-plugin-organize-imports"]
-};

login/packages/zitadel-prettier-config/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "@zitadel/prettier-config",
-  "version": "0.1.1",
-  "description": "Prettier configuration",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "exports": {
-    ".": "./index.js"
-  }
-}

login/packages/zitadel-tailwind-config/CHANGELOG.md

@@ -1,13 +0,0 @@
-# @zitadel/tailwind-config
-
-## 0.1.1
-
-### Patch Changes
-
-- README updates
-
-## 0.1.0
-
-### Minor Changes
-
-- f32ab7f: Initial release

login/packages/zitadel-tailwind-config/README.md

@@ -1,36 +0,0 @@
-# ZITADEL Tailwind Config
-
-This package provides the Tailwind CSS configuration used by ZITADEL projects. It includes a set of default styles, themes, and utility classes to ensure consistent design and styling across all ZITADEL codebases.
-
-## Installation
-
-To install the package, use npm or yarn:
-
-```sh
-npm install @zitadel/tailwind-config
-```
-
-or
-
-```sh
-yarn add @zitadel/tailwind-config
-```
-
-## Usage
-
-To use the Tailwind CSS configuration in your project, extend it in your `tailwind.config.js` file:
-
-```js
-module.exports = {
-  presets: [require("@zitadel/tailwind-config")],
-  // Add your custom configurations here
-};
-```
-
-## Documentation
-
-For detailed documentation and configuration options, please refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs)
-
-## Contributing
-
-Contributions are welcome! Please read the contributing guidelines before getting started.

login/packages/zitadel-tailwind-config/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "@zitadel/tailwind-config",
-  "version": "0.1.1",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "index.js",
-  "exports": {
-    ".": "./index.js",
-    "./tailwind.config.mjs": "./tailwind.config.mjs"
-  },
-  "devDependencies": {
-    "tailwindcss": "^4.1.4",
-    "@tailwindcss/forms": "0.5.3"
-  }
-}

login/packages/zitadel-tailwind-config/tailwind.config.mjs

@@ -1,97 +0,0 @@
-import colors from "tailwindcss/colors";
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./app/**/*.{js,ts,jsx,tsx}", "./page/**/*.{js,ts,jsx,tsx}", "./ui/**/*.{js,ts,jsx,tsx}"],
-  future: {
-    hoverOnlyWhenSupported: true,
-  },
-  theme: {
-    extend: {
-      // https://vercel.com/design/color
-      fontSize: {
-        "12px": "12px",
-        "14px": "14px",
-      },
-      colors: {
-        gray: colors.zinc,
-        divider: {
-          dark: "rgba(135,149,161,.2)",
-          light: "rgba(135,149,161,.2)",
-        },
-        input: {
-          light: {
-            label: "#000000c7",
-            background: "#00000004",
-            border: "#1a191954",
-            hoverborder: "1a1b1b",
-          },
-          dark: {
-            label: "#ffffffc7",
-            background: "#00000020",
-            border: "#f9f7f775",
-            hoverborder: "#e0e0e0",
-          },
-        },
-        button: {
-          light: {
-            border: "#0000001f",
-          },
-          dark: {
-            border: "#ffffff1f",
-          },
-        },
-      },
-      backgroundImage: ({ theme }) => ({
-        "dark-vc-border-gradient": `radial-gradient(at left top, ${theme(
-          "colors.gray.800",
-        )}, 50px, ${theme("colors.gray.800")} 50%)`,
-        "vc-border-gradient": `radial-gradient(at left top, ${theme(
-          "colors.gray.200",
-        )}, 50px, ${theme("colors.gray.300")} 50%)`,
-      }),
-      keyframes: ({ theme }) => ({
-        rerender: {
-          "0%": {
-            ["border-color"]: theme("colors.pink.500"),
-          },
-          "40%": {
-            ["border-color"]: theme("colors.pink.500"),
-          },
-        },
-        highlight: {
-          "0%": {
-            background: theme("colors.pink.500"),
-            color: theme("colors.white"),
-          },
-          "40%": {
-            background: theme("colors.pink.500"),
-            color: theme("colors.white"),
-          },
-        },
-        shimmer: {
-          "100%": {
-            transform: "translateX(100%)",
-          },
-        },
-        translateXReset: {
-          "100%": {
-            transform: "translateX(0)",
-          },
-        },
-        fadeToTransparent: {
-          "0%": {
-            opacity: 1,
-          },
-          "40%": {
-            opacity: 1,
-          },
-          "100%": {
-            opacity: 0,
-          },
-        },
-      }),
-    },
-  },
-  plugins: [require("@tailwindcss/forms")],
-};