tailwind.config.cjs

const flowbytePlugin = require("flowbite/plugin")
const typography = require("@tailwindcss/typography")
const colors = require("tailwindcss/colors")

const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
  ],
  plugins: [
    flowbytePlugin,
    typography,
    function ({ addUtilities }) {
      const extendLineThrough = {
        ".line-through-amendment": {
          textDecoration: "line-through",
          "text-decoration-color": "rgba(222, 213, 0, 0.7)",
          "text-decoration-thickness": "2px",
        },
        ".line-through-bill": {
          textDecoration: "line-through",
          "text-decoration-color": "rgba(255, 107, 107, 0.7)",
          "text-decoration-thickness": "2px",
        },
      }
      addUtilities(extendLineThrough)
    },
  ],
  theme: {
    extend: {
      animation: {
        blink: "blinker 300ms ease-in 2",
      },
      blur: {
        xs: "1.2px",
        xxs: "0.8px",
      },
      colors: {
        gray: colors.neutral,
        "le-bleu": "#343bff",
        "le-bleu-light": "#d2dfff",
        "le-jaune-light": "#EEEA8A",
        "le-jaune": "#ded500",
        "le-jaune-dark": "#9d970b",
        "le-jaune-very-dark": "#6E6A08",
        "le-rouge-bill": "#ff6b6b",
        "le-gris-dispositif": "#5E709E",
        "le-gris-dispositif-ultralight": "#EBEFFA",
        "le-gris-dispositif-light": "#CCD3E7",
        "le-gris-dispositif-dark": "#2F406A",
        "le-vert-validation": "#13CC03",
        "le-vert-validation-dark": "#377330",
        "le-vert": {
          50: "#f1f0e6",
          100: "#e2e1cd",
          200: "#c5c39c",
          300: "#a8a66a",
          400: "#8b8839",
          500: "#6e6a07",
          600: "#635f06",
          700: "#585506",
          800: "#424004",
          900: "#2c2a03",
          950: "#161501",
        },
      },
      keyframes: {
        blinker: {
          "50%": { opacity: "60%" },
        },
      },
      transitionTimingFunction: {
        "in-quad": "cubic-bezier(.55, .085, .68, .53)",
        "in-cubic": "cubic-bezier(.550, .055, .675, .19)",
        "in-quart": "cubic-bezier(.895, .03, .685, .22)",
        "in-quint": "cubic-bezier(.755, .05, .855, .06)",
        "in-expo": "cubic-bezier(.95, .05, .795, .035)",
        "in-circ": "cubic-bezier(.6, .04, .98, .335)",
        "in-back": "cubic-bezier(.36, 0, .66, -.56)",

        "out-quad": "cubic-bezier(.25, .46, .45, .94)",
        "out-cubic": "cubic-bezier(.215, .61, .355, 1)",
        "out-quart": "cubic-bezier(.165, .84, .44, 1)",
        "out-quint": "cubic-bezier(.23, 1, .32, 1)",
        "out-expo": "cubic-bezier(.19, 1, .22, 1)",
        "out-circ": "cubic-bezier(.075, .82, .165, 1)",
        "out-back": "cubic-bezier(.34, 1.56, .64, 1)",

        "in-out-quad": "cubic-bezier(.455, .03, .515, .955)",
        "in-out-cubic": "cubic-bezier(.645, .045, .355, 1)",
        "in-out-quart": "cubic-bezier(.77, 0, .175, 1)",
        "in-out-quint": "cubic-bezier(.86, 0, .07, 1)",
        "in-out-expo": "cubic-bezier(1, 0, 0, 1)",
        "in-out-circ": "cubic-bezier(.785, .135, .15, .86)",
        "in-out-back": "cubic-bezier(.68, -.6, .32, 1.6)",
      },
      zIndex: {
        25: "25",
      },
    },
    fontFamily: {
      sans: ["Lato", "sans-serif"],
      serif: ["Lora", "serif"],
      mono: [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "Courier New",
        "monospace",
      ],
    },
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }
      md: "768px",
      // => @media (min-width: 768px) { ... }
      lg: "1024px",
      // => @media (min-width: 1024px) { ... }
      xl: "1280px",
      // => @media (min-width: 1280px) { ... }
      "2xl": "1536px",
      // => @media (min-width: 1536px) { ... }
      "3xl": "2200px",
      // => @media (min-width: 2200px) { ... }
    },
  },
}

module.exports = config