/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");

const srcDir = ".";

module.exports = {
    darkMode: 'class',
    content: [
      `${srcDir}/components/**/*.{vue,js,ts}`,
      `${srcDir}/layouts/**/*.vue`,
      `${srcDir}/pages/**/*.vue`,
      `${srcDir}/composables/**/*.{js,ts}`,
      `${srcDir}/plugins/**/*.{js,ts}`,
      `${srcDir}/App.{js,ts,vue}`,
      `${srcDir}/app.{js,ts,vue}`,
      `${srcDir}/Error.{js,ts,vue}`,
      `${srcDir}/error.{js,ts,vue}`,
      `${srcDir}/nuxt.config.{js,ts}`,
    ],
    theme: {
        fontFamily: {
          display: ["Cormorant Garamond", "ui-serif", "Georgia"],
          body: ["Poppins", "ui-sans-serif", "system-ui"],
        },
        extend: {
          maxWidth: {
            "8xl": "90rem",
          },
          colors: {
            "body-dark": "#121213",
          },
          opacity: {
            2: "0.02",
          },
          keyframes: {
            "pulse-once": {
              "0%, 100%": { transform: "scale(1)" },
              "50%": { transform: "scale(1.2)" },
            },
          },
          animation: {
            "pulse-once": "pulse-once 0.5s cubic-bezier(0.4, 0, 0.6, 1) 1s 2",
          },
        },
      },
    plugins: [
        require('@tailwindcss/typography'),
            /**
     * The following plugin adds support for the `content-visibility` property
     * https://web.dev/content-visibility/
     * https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
     * https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size
     */
    plugin(
        function ({ matchUtilities, theme }) {
          matchUtilities(
            {
              "content-visibility": (value) => {
                return {
                  "content-visibility": value,
                };
              },
            },
            {
              values: theme("contentVisibility"),
            }
          );
          matchUtilities(
            {
              "contain-intrinsic-size": (value) => {
                return {
                  "contain-intrinsic-size": value,
                };
              },
            },
            {
              values: theme("containIntrinsicSize"),
            }
          );
        },
        {
          theme: {
            contentVisibility: {
              auto: "auto",
              hidden: "hidden",
              visible: "visible",
            },
          },
        }
      ),
      ],
      
  };