tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  prefix: "",
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  mode: "jit",
  corePlugins: {
    aspectRatio: false,
    preflight: true,
  },
  theme: {
    screens: {
      xxs: "320px",
      xs: "425px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
    },
    extend: {
      borderColor: ["autofill"],
      shadowFill: ["autofill"],
      textFill: ["autofill"],
      scrollbar: {
        DEFAULT: {
          size: "spacing.1",
          track: { background: "lightgray" },
          thumb: { background: "gray" },
          hover: { background: "darkgray" },
        },
        thin: {
          size: "2px",
          track: { background: "lightgray" },
          thumb: { background: "gray" },
          hover: { background: "darkgray" },
        },
        primary: {
          size: "1rem",
          track: { background: "#E1ECC8" },
          thumb: { background: "#C5DA92" },
          hover: { background: "#4F6C42" },
        },
        secondary: {
          size: ".5rem",
          track: { background: "#E1ECC8" },
          thumb: { background: "#C5DA92" },
          hover: { background: "#4F6C42" },
        },
      },
      tooltipArrows: (theme) => ({
        "danger-arrow": {
          borderColor: theme("colors.red.400"),
          borderWidth: 1,
          backgroundColor: theme("colors.red.200"),
          size: 10,
          offset: 10,
        },
      }),
      fontFamily: {
        inter: ["Inter", "sans-serif"],
      },
      colors: {
        card: {
          shadow: "#00000025",
          input: "#00000000",
        },
        light: {
          default: "#e5e5e5",
          variant: "#ffffff",
        },
        dark: {
          default: "#212B36",
          shadow: "#00000075",
          variant: "#000000",
        },
        primary: {
          default: "#C5DA92",
          variant: "#D1E1A8",
          accent: "#4F6C42",
          t2: "#DCE9BE",
          t3: "#E1ECC8",
          t4: "#E8F0D3",
          t5: "#F3F8E9",
        },
        secondary: {
          default: "#7D7E66",
          variant: "#979885",
          accent: "#525137",
          t2: "#B1B2A3",
          t3: "#BDBEB2",
          t4: "#CBCBC2",
          t5: "#E5E5E0",
        },
        neutral: {
          primary: "#212B36",
          secondary: "#5E738A",
          800: "#333F4D",
          700: "#425263",
          600: "#516579",
          300: "#8D9DAE",
          200: "#ADB9C6",
          100: "#CCD5DE",
          50: "#F4F6F8",
        },
      },
    },
  },
  daisyui: {
    themes: false,
    base: true,
    styled: true,
    utils: true,
    rtl: false,
    prefix: "",
    logs: false,
    themes: [
      {
        mytheme: {
          primary: "#C5DA92",
          secondary: "#7D7E66",
          accent: "#4F6C42",
          neutral: "#525137",
          "base-100": " #e5e5e5",
          info: "#248EF2",
          success: "#39B54A",
          warning: "#FFB400",
          error: "#FF0000",
        },
      },
    ],
  },
  plugins: [
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/container-queries"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("@kamona/tailwindcss-perspective"),
    require("@gradin/tailwindcss-scrollbar"),
    require("tailwindcss-labeled-groups")(["custom", "1"]),
    require("tailwindcss-css-filters"),
    require("tailwindcss-highlights"),
    require("tailwindcss-autofill"),
    require("tailwindcss-tooltip-arrow-after"),
    require("tailwindcss-debug-screens"),
    require("tailwindcss-gradients"),
    require("tailwindcss-border-gradients")(),
    require("daisyui"),
  ],
};