import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "var(--ion-color-primary)",
        secondary: "var(--ion-color-secondary)",
        tertiary: "var(--ion-color-tertiary)",
        success: "var(--ion-color-success)",
        warning: "var(--ion-color-warning)",
        danger: "var(--ion-color-danger)",
        light: "var(--ion-color-light)",
        medium: "var(--ion-color-medium)",
        dark: "var(--ion-color-dark)",
        faint: "var(--ion-color-faint)",
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        ".flex-center": {
          "display": "flex",
          "align-items": "center",
          "justify-content": "center",
        },
        ".flex-col-center": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "justify-content": "center",
        },
        ".scrollbar-hide": {
          "-ms-overflow-style": "none",
          "scrollbar-width": "none",
          "&::-webkit-scrollbar": {
            display: "none",
          },
        },
      });
    },
  ],
};

export default config;