beteran-frontend-app-browser/tailwind.config.js

const path = require("path");
const colors = require("tailwindcss/colors");
const defaultTheme = require("tailwindcss/defaultTheme");
const generatePalette = require(path.resolve(
  __dirname,
  "src/@fuse/tailwind/utils/generate-palette"
));

/**
 * Custom palettes
 *
 * Uses the generatePalette helper method to generate
 * Tailwind-like color palettes automatically
 */
const customPalettes = {
  brand: generatePalette("#2196F3"),
};

/**
 * Themes
 */
const themes = {
  // Default theme is required for theming system to work correctly
  default: {
    primary: {
      ...colors.indigo,
      DEFAULT: colors.indigo[600],
    },
    accent: {
      ...colors.slate,
      DEFAULT: colors.slate[800],
    },
    warn: {
      ...colors.red,
      DEFAULT: colors.red[600],
    },
    "on-warn": {
      500: colors.red["50"],
    },
  },
  // Rest of the themes will use the 'default' as the base theme
  // and extend them with their given configuration
  brand: {
    primary: customPalettes.brand,
  },
  teal: {
    primary: {
      ...colors.teal,
      DEFAULT: colors.teal[600],
    },
  },
  rose: {
    primary: colors.rose,
  },
  purple: {
    primary: {
      ...colors.purple,
      DEFAULT: colors.purple[600],
    },
  },
  amber: {
    primary: colors.amber,
  },
};

/**
 * Tailwind configuration
 */
const config = {
  darkMode: "class",
  content: ["./src/**/*.{html,scss,ts}"],
  important: true,
  theme: {
    fontSize: {
      xs: "0.625rem",
      sm: "0.75rem",
      md: "0.8125rem",
      base: "0.875rem",
      lg: "1rem",
      xl: "1.125rem",
      "2xl": "1.25rem",
      "3xl": "1.5rem",
      "4xl": "2rem",
      "5xl": "2.25rem",
      "6xl": "2.5rem",
      "7xl": "3rem",
      "8xl": "4rem",
      "9xl": "6rem",
      "10xl": "8rem",
    },
    screens: {
      sm: "600px",
      md: "960px",
      lg: "1280px",
      xl: "1440px",
    },
    extend: {
      animation: {
        "spin-slow": "spin 3s linear infinite",
      },
      colors: {
        gray: colors.slate,
      },
      flex: {
        0: "0 0 auto",
      },
      fontFamily: {
        sans: `"Inter var", ${defaultTheme.fontFamily.sans.join(",")}`,
        mono: `"IBM Plex Mono", ${defaultTheme.fontFamily.mono.join(",")}`,
      },
      opacity: {
        12: "0.12",
        38: "0.38",
        87: "0.87",
      },
      rotate: {
        "-270": "270deg",
        15: "15deg",
        30: "30deg",
        60: "60deg",
        270: "270deg",
      },
      scale: {
        "-1": "-1",
      },
      zIndex: {
        "-1": -1,
        49: 49,
        60: 60,
        70: 70,
        80: 80,
        90: 90,
        99: 99,
        999: 999,
        9999: 9999,
        99999: 99999,
      },
      spacing: {
        13: "3.25rem",
        15: "3.75rem",
        18: "4.5rem",
        22: "5.5rem",
        26: "6.5rem",
        30: "7.5rem",
        50: "12.5rem",
        90: "22.5rem",

        // Bigger values
        100: "25rem",
        120: "30rem",
        128: "32rem",
        140: "35rem",
        160: "40rem",
        180: "45rem",
        192: "48rem",
        200: "50rem",
        240: "60rem",
        256: "64rem",
        280: "70rem",
        320: "80rem",
        360: "90rem",
        400: "100rem",
        480: "120rem",

        // Fractional values
        "1/2": "50%",
        "1/3": "33.333333%",
        "2/3": "66.666667%",
        "1/4": "25%",
        "2/4": "50%",
        "3/4": "75%",
      },
      minHeight: ({ theme }) => ({
        ...theme("spacing"),
      }),
      maxHeight: {
        none: "none",
      },
      minWidth: ({ theme }) => ({
        ...theme("spacing"),
        screen: "100vw",
      }),
      maxWidth: ({ theme }) => ({
        ...theme("spacing"),
        screen: "100vw",
      }),
      transitionDuration: {
        400: "400ms",
      },
      transitionTimingFunction: {
        drawer: "cubic-bezier(0.25, 0.8, 0.25, 1)",
      },

      // @tailwindcss/typography
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            color: "var(--fuse-text-default)",
            '[class~="lead"]': {
              color: "var(--fuse-text-secondary)",
            },
            a: {
              color: "var(--fuse-primary-500)",
            },
            strong: {
              color: "var(--fuse-text-default)",
            },
            "ol > li::before": {
              color: "var(--fuse-text-secondary)",
            },
            "ul > li::before": {
              backgroundColor: "var(--fuse-text-hint)",
            },
            hr: {
              borderColor: "var(--fuse-border)",
            },
            blockquote: {
              color: "var(--fuse-text-default)",
              borderLeftColor: "var(--fuse-border)",
            },
            h1: {
              color: "var(--fuse-text-default)",
            },
            h2: {
              color: "var(--fuse-text-default)",
            },
            h3: {
              color: "var(--fuse-text-default)",
            },
            h4: {
              color: "var(--fuse-text-default)",
            },
            "figure figcaption": {
              color: "var(--fuse-text-secondary)",
            },
            code: {
              color: "var(--fuse-text-default)",
              fontWeight: "500",
            },
            "a code": {
              color: "var(--fuse-primary)",
            },
            pre: {
              color: theme("colors.white"),
              backgroundColor: theme("colors.gray.800"),
            },
            thead: {
              color: "var(--fuse-text-default)",
              borderBottomColor: "var(--fuse-border)",
            },
            "tbody tr": {
              borderBottomColor: "var(--fuse-border)",
            },
            'ol[type="A" s]': false,
            'ol[type="a" s]': false,
            'ol[type="I" s]': false,
            'ol[type="i" s]': false,
          },
        },
        sm: {
          css: {
            code: {
              fontSize: "1em",
            },
            pre: {
              fontSize: "1em",
            },
            table: {
              fontSize: "1em",
            },
          },
        },
      }),
    },
  },
  corePlugins: {
    appearance: false,
    container: false,
    float: false,
    clear: false,
    placeholderColor: false,
    placeholderOpacity: false,
    verticalAlign: false,
  },
  plugins: [
    // Fuse - Tailwind plugins
    require(path.resolve(__dirname, "src/@fuse/tailwind/plugins/utilities")),
    require(path.resolve(__dirname, "src/@fuse/tailwind/plugins/icon-size")),
    require(path.resolve(__dirname, "src/@fuse/tailwind/plugins/theming"))({
      themes,
    }),

    // Other third party and/or custom plugins
    require("@tailwindcss/typography")({ modifiers: ["sm", "lg"] }),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/line-clamp"),
  ],
};

module.exports = config;