tailwind.config.cjs

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./*.{html,js,ts,jsx,tsx}", "./src/**/*.{html,tsx,jsx,js,ts}"],
  darkMode: "class",
  theme: {
    backgroundColor: ({ theme }) => ({
      ...theme("colors"),
      base: "#dbdbdb",
      baseDark: "#333",
      card: "#fefefe",
      cardDark: "#0a0a0a",
      navbarBase: "#2c2c2c",
      navbarBaseHover: "#1e1e1e",
      primaryBlue: "#2b1cd9",
      primaryBlueHover: "#2114b1",
      secondaryBlue: "#0c99ff",
      secondaryBlueHover: "#0c7dce",
      switchActive: "#c7c7c7",
      switchInActive: "#2c2c2c",
    }),
    borderColor: ({ theme }) => ({
      ...theme("colors"),
      DEFAULT: theme("colors.gray.200", "currentColor"),
      switchBorderColor: "#505050",
    }),
    screens: {
      xs5: "200px",
      xs4: "300px",
      xs3: "400px",
      xs2: "500px",
      xs: "768px",
      sm: "976px",
      md: "1025px",
      lg: "1280px",
      xl: "1440px",
    },
    height: ({ 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%",
      full: "100%",
      screen: "100vh",
      min: "min-content",
      max: "max-content",
      fit: "fit-content",
      switchBase: "20px",
      switchThumb: "30px",
    }),
    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",
      min: "min-content",
      max: "max-content",
      fit: "fit-content",
      switchBase: "50px",
      swithThumb: "30px",
    }),
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
      serif: ["Merriweather", "serif"],
      roboto: ["Roboto", "serif"],
      bebas: ["BebasNeueu", "serif"],
    },
    extend: {},
  },
  plugins: [
    require("tailwindcss"),
    require("postcss"),
    require("autoprefixer"),
    require("@tailwindcss/line-clamp"),
  ],
};