tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: {
          light: "#ffecb1",
          DEFAULT: "#FFCA1F",
          dark: "#ffc100",
        },
      },
      spacing: {
        fbb1: "0.25em",
        "fbb1.5": "0.375em",
        fbb2: "0.5em",
        fbb3: "0.75em",
        fbb4: "1em",
        fbb5: "1.25em",
        fbb6: "1.5em",
        fbb8: "2em",
        fbb10: "2.5em",
        fbb11: "2.75em",
        fbb12: "3em",
      },
      borderRadius: {
        sm: "0.125em",
        DEFAULT: "0.25em",
        md: "0.375em",
        lg: "0.5em",
        xl: "0.75em",
        "2xl": "1em",
        "3xl": "1.5em",
      },
      columns: {
        "3xs": "16em",
        "2xs": "18em",
        xs: "20em",
        sm: "24em",
        md: "28em",
        lg: "32em",
        xl: "36em",
        "2xl": "42em",
        "3xl": "48em",
        "4xl": "56em",
        "5xl": "64em",
        "6xl": "72em",
        "7xl": "80em",
      },
      fontSize: {
        xs: ["0.75em", { lineHeight: "1em" }],
        sm: ["0.875em", { lineHeight: "1.25em" }],
        base: ["1em", { lineHeight: "1.5em" }],
        lg: ["1.125em", { lineHeight: "1.75em" }],
        xl: ["1.25em", { lineHeight: "1.75em" }],
        "2xl": ["1.5em", { lineHeight: "2em" }],
        "3xl": ["1.875em", { lineHeight: "2.25em" }],
        "4xl": ["2.25em", { lineHeight: "2.5em" }],
        "5xl": ["3em", { lineHeight: "1" }],
        "6xl": ["3.75em", { lineHeight: "1" }],
        "7xl": ["4.5em", { lineHeight: "1" }],
        "8xl": ["6em", { lineHeight: "1" }],
        "9xl": ["8em", { lineHeight: "1" }],
      },
      lineHeight: {
        3: ".75em",
        4: "1em",
        5: "1.25em",
        6: "1.5em",
        7: "1.75em",
        8: "2em",
        9: "2.25em",
        10: "2.5em",
      },
      maxWidth: ({ theme, breakpoints }) => ({
        none: "none",
        0: "0em",
        xs: "20em",
        sm: "24em",
        md: "28em",
        lg: "32em",
        xl: "36em",
        "2xl": "42em",
        "3xl": "48em",
        "4xl": "56em",
        "5xl": "64em",
        "6xl": "72em",
        "7xl": "80em",
        full: "100%",
        min: "min-content",
        max: "max-content",
        fit: "fit-content",
        prose: "65ch",
        ...breakpoints(theme("screens")),
      }),
    },
  },
  plugins: [],
  prefix: "fbb-",
  important: true,
  corePlugins: {
    preflight: false,
  },
};