tailwind.config.js

module.exports = {
  prefix: "",
  important: false,
  separator: ":",
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px"
    },
    colors: {
      transparent: "transparent",

      black: "#000",
      white: "#fff",

      darkgray: {
        100: "#ECECEC",
        200: "#CECECF",
        300: "#B1B1B2",
        400: "#777778",
        500: "#3C3C3E",
        600: "#363638",
        700: "#242425",
        800: "#1B1B1C",
        900: "#121213"
      },
      gray: {
        100: "#F8F8F8",
        200: "#ECEDED",
        300: "#E1E1E2",
        400: "#CBCBCD",
        500: "#B4B5B7",
        600: "#A2A3A5",
        700: "#6C6D6E",
        800: "#515152",
        900: "#363637"
      },
      gold: {
        100: "#FDF7EB",
        200: "#FAEBCD",
        300: "#F7DFAF",
        400: "#F0C674",
        500: "#EAAE38",
        600: "#D39D32",
        700: "#8C6822",
        800: "#694E19",
        900: "#463411"
      },
      darkred: {
        100: "#F5E6E6",
        200: "#E6C0C1",
        300: "#D79A9C",
        400: "#B84E51",
        500: "#9A0207",
        600: "#8B0206",
        700: "#5C0104",
        800: "#450103",
        900: "#2E0102"
      },
      red: {
        100: "#FCE6E6",
        200: "#F7BFBF",
        300: "#F39999",
        400: "#E94D4D",
        500: "#E00000",
        600: "#CA0000",
        700: "#860000",
        800: "#650000",
        900: "#430000"
      },
      darkblue: {
        100: "#E7E7ED",
        200: "#C4C4D2",
        300: "#A0A0B7",
        400: "#595980",
        500: "#12124A",
        600: "#101043",
        700: "#0B0B2C",
        800: "#080821",
        900: "#050516"
      },
      blue: {
        100: "#E6E9F1",
        200: "#C1C9DB",
        300: "#9CA8C5",
        400: "#52679A",
        500: "#08266E",
        600: "#072263",
        700: "#051742",
        800: "#041132",
        900: "#020B21"
      },
      brightblue: {
        100: "#E6EAF8",
        200: "#C0CAED",
        300: "#99AAE2",
        400: "#4D6ACD",
        500: "#012AB7",
        600: "#0126A5",
        700: "#01196E",
        800: "#001352",
        900: "#000D37"
      },
      lightblue: {
        100: "#EDF6FB",
        200: "#D1E8F5",
        300: "#B6DBEF",
        400: "#7FBFE2",
        500: "#48A4D6",
        600: "#4194C1",
        700: "#2B6280",
        800: "#204A60",
        900: "#163140"
      },
      yellow: {
        100: "#FFFCEC",
        200: "#FFF8CF",
        300: "#FFF3B2",
        400: "#FFEB79",
        500: "#FFE23F",
        600: "#E6CB39",
        700: "#998826",
        800: "#73661C",
        900: "#4D4413"
      },
      orange: {
        100: "#FFEEE6",
        200: "#FED4C1",
        300: "#FEB99B",
        400: "#FD8550",
        500: "#FC5105",
        600: "#E34905",
        700: "#973103",
        800: "#712402",
        900: "#4C1802"
      },
      washedorange: {
        100: "#FFF6EA",
        200: "#FFE9CA",
        300: "#FFDBAA",
        400: "#FEC06A",
        500: "#FEA52A",
        600: "#E59526",
        700: "#986319",
        800: "#724A13",
        900: "#4C320D"
      },
      purple: {
        100: "#EFEDF1",
        200: "#D6D1DB",
        300: "#BEB5C6",
        400: "#8D7E9B",
        500: "#5C4770",
        600: "#534065",
        700: "#372B43",
        800: "#292032",
        900: "#1C1522"
      },
      washedpurple: {
        100: "#F2EEF0",
        200: "#DFD3DA",
        300: "#CCB9C4",
        400: "#A58597",
        500: "#7F506B",
        600: "#724860",
        700: "#4C3040",
        800: "#392430",
        900: "#261820"
      },
      darkgreen: {
        100: "#E7EEE8",
        200: "#C3D4C5",
        300: "#9EB9A3",
        400: "#56855D",
        500: "#0D5118",
        600: "#0C4916",
        700: "#08310E",
        800: "#06240B",
        900: "#041807"
      },
      green: {
        100: "#E6F3EA",
        200: "#C0E2CA",
        300: "#9BD0AA",
        400: "#4FAD6B",
        500: "#048A2B",
        600: "#047C27",
        700: "#02531A",
        800: "#023E13",
        900: "#01290D"
      },
      washedgreen: {
        100: "#ECEDEA",
        200: "#D0D2C9",
        300: "#B3B6A9",
        400: "#7B8069",
        500: "#424928",
        600: "#3B4224",
        700: "#282C18",
        800: "#1E2112",
        900: "#14160C"
      },
      lightgreen: {
        100: "#ECF7EB",
        200: "#CEEBCD",
        300: "#B1DFAF",
        400: "#77C672",
        500: "#3CAE36",
        600: "#369D31",
        700: "#246820",
        800: "#1B4E18",
        900: "#123410"
      },
      teal: {
        100: "#e6fffa",
        200: "#b2f5ea",
        300: "#81e6d9",
        400: "#4fd1c5",
        500: "#38b2ac",
        600: "#319795",
        700: "#2c7a7b",
        800: "#285e61",
        900: "#234e52"
      },
      indigo: {
        100: "#ebf4ff",
        200: "#c3dafe",
        300: "#a3bffa",
        400: "#7f9cf5",
        500: "#667eea",
        600: "#5a67d8",
        700: "#4c51bf",
        800: "#434190",
        900: "#3c366b"
      },
      pink: {
        100: "#fff5f7",
        200: "#fed7e2",
        300: "#fbb6ce",
        400: "#f687b3",
        500: "#ed64a6",
        600: "#d53f8c",
        700: "#b83280",
        800: "#97266d",
        900: "#702459"
      },
      coral: {
        100: "#FFECEC",
        200: "#FFCFCF",
        300: "#FFB1B1",
        400: "#FF7777",
        500: "#FF3D3D",
        600: "#E63737",
        700: "#992525",
        800: "#731B1B",
        900: "#4D1212"
      },
      brown: {
        100: "#F5F0E9",
        200: "#E7D9C9",
        300: "#D9C3A9",
        400: "#BC9568",
        500: "#9F6827",
        600: "#8F5E23",
        700: "#5F3E17",
        800: "#482F12",
        900: "#301F0C"
      }
    },
    spacing: {
      px: "1px",
      "0": "0",
      "1": "0.25rem",
      "2": "0.5rem",
      "3": "0.75rem",
      "4": "1rem",
      "5": "1.25rem",
      "6": "1.5rem",
      "8": "2rem",
      "10": "2.5rem",
      "12": "3rem",
      "16": "4rem",
      "20": "5rem",
      "24": "6rem",
      "32": "8rem",
      "40": "10rem",
      "48": "12rem",
      "56": "14rem",
      "64": "16rem"
    },
    backgroundColor: theme => theme("colors"),
    backgroundPosition: {
      bottom: "bottom",
      center: "center",
      left: "left",
      "left-bottom": "left bottom",
      "left-top": "left top",
      right: "right",
      "right-bottom": "right bottom",
      "right-top": "right top",
      top: "top"
    },
    backgroundSize: {
      auto: "auto",
      cover: "cover",
      contain: "contain"
    },
    borderColor: theme => ({
      ...theme("colors"),
      default: theme("colors.gray.300", "currentColor")
    }),
    borderRadius: {
      none: "0",
      sm: "0.125rem",
      default: "0.25rem",
      lg: "0.5rem",
      full: "9999px"
    },
    borderWidth: {
      default: "1px",
      "0": "0",
      "2": "2px",
      "4": "4px",
      "8": "8px"
    },
    boxShadow: {
      default:
        "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
      md:
        "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
      lg:
        "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
      xl:
        "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
      "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
      inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
      outline: "0 0 0 3px rgba(66, 153, 225, 0.5)",
      none: "none"
    },
    container: {},
    cursor: {
      auto: "auto",
      default: "default",
      pointer: "pointer",
      wait: "wait",
      text: "text",
      move: "move",
      "not-allowed": "not-allowed"
    },
    fill: {
      current: "currentColor"
    },
    flex: {
      "1": "1 1 0%",
      auto: "1 1 auto",
      initial: "0 1 auto",
      none: "none"
    },
    flexGrow: {
      "0": "0",
      default: "1"
    },
    flexShrink: {
      "0": "0",
      default: "1"
    },
    fontFamily: {
      sans: [
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        "Roboto",
        '"Helvetica Neue"',
        "Arial",
        '"Noto Sans"',
        "sans-serif",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
        '"Noto Color Emoji"'
      ],
      serif: ["Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
      mono: [
        "Menlo",
        "Monaco",
        "Consolas",
        '"Liberation Mono"',
        '"Courier New"',
        "monospace"
      ],
      hulksmash: ["Bangers"],
      spiderman: ['"Open Sans"'],
      robotocondensed: ['"Roboto Condensed"']
    },
    fontSize: {
      xs: "0.75rem",
      sm: "0.875rem",
      base: "1rem",
      lg: "1.125rem",
      xl: "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
      "6xl": "4rem"
    },
    fontWeight: {
      hairline: "100",
      thin: "200",
      light: "300",
      normal: "400",
      medium: "500",
      semibold: "600",
      bold: "700",
      extrabold: "800",
      black: "900"
    },
    height: theme => ({
      auto: "auto",
      ...theme("spacing"),
      full: "100%",
      screen: "100vh"
    }),
    inset: {
      "0": "0",
      auto: "auto"
    },
    letterSpacing: {
      tighter: "-0.05em",
      tight: "-0.025em",
      normal: "0",
      wide: "0.025em",
      wider: "0.05em",
      widest: "0.1em"
    },
    lineHeight: {
      none: "1",
      tight: "1.25",
      snug: "1.375",
      normal: "1.5",
      relaxed: "1.625",
      loose: "2"
    },
    listStyleType: {
      none: "none",
      disc: "disc",
      decimal: "decimal"
    },
    margin: (theme, { negative }) => ({
      auto: "auto",
      ...theme("spacing"),
      ...negative(theme("spacing"))
    }),
    maxHeight: {
      full: "100%",
      screen: "100vh"
    },
    maxWidth: {
      xs: "20rem",
      sm: "24rem",
      md: "28rem",
      lg: "32rem",
      xl: "36rem",
      "2xl": "42rem",
      "3xl": "48rem",
      "4xl": "56rem",
      "5xl": "64rem",
      "6xl": "72rem",
      full: "100%"
    },
    minHeight: {
      "0": "0",
      full: "100%",
      screen: "100vh"
    },
    minWidth: {
      "0": "0",
      full: "100%"
    },
    objectPosition: {
      bottom: "bottom",
      center: "center",
      left: "left",
      "left-bottom": "left bottom",
      "left-top": "left top",
      right: "right",
      "right-bottom": "right bottom",
      "right-top": "right top",
      top: "top"
    },
    opacity: {
      "0": "0",
      "25": "0.25",
      "50": "0.5",
      "75": "0.75",
      "100": "1"
    },
    order: {
      first: "-9999",
      last: "9999",
      none: "0",
      "1": "1",
      "2": "2",
      "3": "3",
      "4": "4",
      "5": "5",
      "6": "6",
      "7": "7",
      "8": "8",
      "9": "9",
      "10": "10",
      "11": "11",
      "12": "12"
    },
    padding: theme => theme("spacing"),
    placeholderColor: theme => theme("colors"),
    stroke: {
      current: "currentColor"
    },
    textColor: theme => theme("colors"),
    width: theme => ({
      auto: "auto",
      ...theme("spacing"),
      "1/2": "50%",
      "1/3": "33.333333%",
      "2/3": "66.666667%",
      "1/4": "25%",
      "2/4": "50%",
      "3/4": "75%",
      "1/5": "20%",
      "2/5": "40%",
      "3/5": "60%",
      "4/5": "80%",
      "1/6": "16.666667%",
      "2/6": "33.333333%",
      "3/6": "50%",
      "4/6": "66.666667%",
      "5/6": "83.333333%",
      "1/12": "8.333333%",
      "2/12": "16.666667%",
      "3/12": "25%",
      "4/12": "33.333333%",
      "5/12": "41.666667%",
      "6/12": "50%",
      "7/12": "58.333333%",
      "8/12": "66.666667%",
      "9/12": "75%",
      "10/12": "83.333333%",
      "11/12": "91.666667%",
      full: "100%",
      screen: "100vw"
    }),
    zIndex: {
      auto: "auto",
      "0": "0",
      "10": "10",
      "20": "20",
      "30": "30",
      "40": "40",
      "50": "50"
    }
  },
  variants: {
    accessibility: ["responsive", "focus"],
    alignContent: ["responsive"],
    alignItems: ["responsive"],
    alignSelf: ["responsive"],
    appearance: ["responsive"],
    backgroundAttachment: ["responsive"],
    backgroundColor: ["responsive", "hover", "focus"],
    backgroundPosition: ["responsive"],
    backgroundRepeat: ["responsive"],
    backgroundSize: ["responsive"],
    borderCollapse: ["responsive"],
    borderColor: ["responsive", "hover", "focus"],
    borderRadius: ["responsive"],
    borderStyle: ["responsive"],
    borderWidth: ["responsive"],
    boxShadow: ["responsive", "hover", "focus"],
    cursor: ["responsive"],
    display: ["responsive"],
    fill: ["responsive"],
    flex: ["responsive"],
    flexDirection: ["responsive"],
    flexGrow: ["responsive"],
    flexShrink: ["responsive"],
    flexWrap: ["responsive"],
    float: ["responsive"],
    fontFamily: ["responsive"],
    fontSize: ["responsive"],
    fontSmoothing: ["responsive"],
    fontStyle: ["responsive"],
    fontWeight: ["responsive", "hover", "focus"],
    height: ["responsive"],
    inset: ["responsive"],
    justifyContent: ["responsive"],
    letterSpacing: ["responsive"],
    lineHeight: ["responsive"],
    listStylePosition: ["responsive"],
    listStyleType: ["responsive"],
    margin: ["responsive"],
    maxHeight: ["responsive"],
    maxWidth: ["responsive"],
    minHeight: ["responsive"],
    minWidth: ["responsive"],
    objectFit: ["responsive"],
    objectPosition: ["responsive"],
    opacity: ["responsive", "hover", "focus"],
    order: ["responsive"],
    outline: ["responsive", "focus"],
    overflow: ["responsive"],
    padding: ["responsive"],
    placeholderColor: ["responsive", "focus"],
    pointerEvents: ["responsive"],
    position: ["responsive"],
    resize: ["responsive"],
    stroke: ["responsive"],
    tableLayout: ["responsive"],
    textAlign: ["responsive"],
    textColor: ["responsive", "hover", "focus"],
    textDecoration: ["responsive", "hover", "focus"],
    textTransform: ["responsive"],
    userSelect: ["responsive"],
    verticalAlign: ["responsive"],
    visibility: ["responsive"],
    whitespace: ["responsive"],
    width: ["responsive"],
    wordBreak: ["responsive"],
    zIndex: ["responsive"]
  },
  corePlugins: {},
  plugins: []
};