tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    colors: {
      "square-light": "#D7CEB2",
      "square-dark": "#66635B",
      "main-background": "#93A8AC",
      "button-background": "#4C5760",
      "button-background-hover": "#505b64",
      "result-background": "#A59E8C",
      "result-border": "#827873",
      "game-controls-background": "#7e7f92",
    },
    extend: {},
  },
  plugins: [],
  safelist: [
    { pattern: /(bg|text|border)-(square-dark|square-light)/ },
    "dark-pawn",
    "dark-bishop",
    "dark-knight",
    "dark-rook",
    "dark-queen",
    "dark-king",
    "light-pawn",
    "light-bishop",
    "light-knight",
    "light-rook",
    "light-queen",
    "light-king",
    "translate-x-[100%]",
    "translate-x-[200%]",
    "translate-x-[300%]",
    "translate-x-[400%]",
    "translate-x-[500%]",
    "translate-x-[600%]",
    "translate-x-[700%]",
    "translate-x-[800%]",
    "translate-x-[900%]",
    "translate-y-[100%]",
    "translate-y-[200%]",
    "translate-y-[300%]",
    "translate-y-[400%]",
    "translate-y-[500%]",
    "translate-y-[600%]",
    "translate-y-[700%]",
    "translate-y-[800%]",
    "translate-y-[900%]",
  ],
};