tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"],
  plugins: [require("daisyui")],
  darkTheme: "scaffoldEthDark",
  // DaisyUI theme colors
  daisyui: {
    themes: [
      {
        customDark: {
          primary: "#67cff1", // A shade of purple for primary elements
          "primary-content": "#F9FBFF", // High contrast content color for readability
          secondary: "#323f61", // A subdued shade for secondary elements
          "secondary-content": "#F9FBFF",
          accent: "#BB86FC", // A lighter purple for accent elements
          "accent-content": "#F9FBFF",
          neutral: "#2A2E35", // Dark grey for neutral backgrounds
          "neutral-content": "#F9FBFF", // Content color against the neutral background
          "base-100": "#121212", // Dark base color for backgrounds
          "base-200": "#1F1F1F", // Slightly lighter dark shade for layering
          "base-300": "#242424", // Additional layering shade
          "base-content": "#E0E0E0", // Greyish color for primary content
          info: "#3B82F6", // Information messages or icons
          success: "#4CAF50", // Success states, buttons, or icons
          warning: "#FB8C00", // Warning messages or icons
          error: "#F44336", // Error states, messages, or icons

          // Customizations for rounded buttons, tooltips, and links
          "--rounded-btn": "0.5rem", // Rounded corners for buttons
          ".tooltip": {
            "--tooltip-tail": "6px",
            "--tooltip-color": "oklch(var(--p))",
          },
          ".link": {
            textUnderlineOffset: "2px",
          },
          ".link:hover": {
            opacity: "80%",
          },
        },
      },
      {
        scaffoldEth: {
          primary: "#93BBFB",
          "primary-content": "#212638",
          secondary: "#DAE8FF",
          "secondary-content": "#212638",
          accent: "#93BBFB",
          "accent-content": "#212638",
          neutral: "#212638",
          "neutral-content": "#ffffff",
          "base-100": "#ffffff",
          "base-200": "#f4f8ff",
          "base-300": "#DAE8FF",
          "base-content": "#212638",
          info: "#93BBFB",
          success: "#34EEB6",
          warning: "#FFCF72",
          error: "#FF8863",

          "--rounded-btn": "9999rem",

          ".tooltip": {
            "--tooltip-tail": "6px",
          },
          ".link": {
            textUnderlineOffset: "2px",
          },
          ".link:hover": {
            opacity: "80%",
          },
        },
      },
      {
        scaffoldEthDark: {
          primary: "#212638",
          "primary-content": "#F9FBFF",
          secondary: "#323f61",
          "secondary-content": "#F9FBFF",
          accent: "#4969A6",
          "accent-content": "#F9FBFF",
          neutral: "#F9FBFF",
          "neutral-content": "#385183",
          "base-100": "#385183",
          "base-200": "#2A3655",
          "base-300": "#212638",
          "base-content": "#F9FBFF",
          info: "#385183",
          success: "#34EEB6",
          warning: "#FFCF72",
          error: "#FF8863",

          "--rounded-btn": "9999rem",

          ".tooltip": {
            "--tooltip-tail": "6px",
            "--tooltip-color": "oklch(var(--p))",
          },
          ".link": {
            textUnderlineOffset: "2px",
          },
          ".link:hover": {
            opacity: "80%",
          },
        },
      },
    ],
  },
  theme: {
    extend: {
      boxShadow: {
        center: "0 0 12px -2px rgb(0 0 0 / 0.05)",
      },
      animation: {
        "pulse-fast": "pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
      },
      height: {
        "full-minus-200": "calc(100vh - 200px)", // Full height minus 200 pixels
      },
      fontFamily: {
        plex: ["var(--font-ibm-plex-mono)"],
      },
      backgroundImage: {
        "custom-gradient": "radial-gradient(var(--tw-gradient-stops))",
      },
      screens: {
        sm: "640px", // Small screens and up
        md: "768px", // Medium screens and up
        lg: "1024px", // Large screens and up
        xl: "1280px", // Extra large screens and up
      },
    },
  },
  variants: {
    extend: {
      backgroundImage: ["dark"],
    },
  },
};