tailwind.config.js

import preset from "franken-ui/shadcn-ui/preset";
import variables from "franken-ui/shadcn-ui/variables";
import ui from "franken-ui";
import hooks from "franken-ui/shadcn-ui/hooks";

const shadcn = hooks();

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
    "./md/**/*.md",
  ],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem",
        sm: "2rem",
      },
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      maxWidth: {
        "8xl": "90rem",
      },
    },
  },
  presets: [preset],
  plugins: [
    require('@tailwindcss/typography'),
    variables(),
    ui({
      components: {
        nav: {
          hooks: shadcn.nav,
        },
        offcanvas: {
          hooks: shadcn.offcanvas,
          media: false,
        },
        navbar: {
          hooks: shadcn.navbar,
          media: false,
        },
        animation: {},
        button: {
          hooks: shadcn.button,
        },
        icon: {
          hooks: shadcn.icon,
        },
        iconnav: {
          hooks: shadcn.iconnav,
        },
        label: {
          hooks: shadcn.label,
        },
        card: {
          hooks: shadcn.card,
        },
        divider: {
          hooks: shadcn.divider,
        },
        badge: {
          hooks: shadcn.badge,
        },
        tooltip: {
          hooks: shadcn.tooltip,
        }
      },
    },
    ),
  ],
}