@zeytal/grid/tailwind.config.ts

Small layout grid utility. Align everything perfectly. Simplify your responsive design coding process without sacrificing effectiveness. Hit G on your keyboard to toggle your grid on and off.

import type { Config } from "tailwindcss";

import sharedConfig from "@endgame/tailwind-config";

export const config: Config = {
  prefix: "gd-",
  presets: [sharedConfig],
  content: {
    files: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
  },
  corePlugins: {
    preflight: false,
  },
  theme: {
    screens: {
      "320x": "20rem", // 320px
      "400x": "25rem", // 400px
      "480x": "30rem", // 480px
      "576x": "36rem", // 576px
      "672x": "42rem", // 672px
      "768x": "48rem", // 768px
      "896x": "56rem", // 896px
      "1024x": "64rem", // 1024px
      "1152x": "72rem", // 1152px
      "1280x": "80rem", // 1280px
      "1408x": "88rem", // 1408px
      "1536x": "96rem", // 1536px
      "1920x": "120rem", // 1920px
    },
    extend: {
      colors: {
        blue: {
          400: "hsl(var(--grid-blue-400))",
          700: "hsl(var(--grid-blue-700))",
        },
        teal: {
          400: "hsl(var(--grid-teal-400))",
          700: "hsl(var(--grid-teal-700))",
        },
        green: {
          400: "hsl(var(--grid-green-400))",
          700: "hsl(var(--grid-green-700))",
        },
        amber: {
          400: "hsl(var(--grid-amber-400))",
          700: "hsl(var(--grid-amber-700))",
        },
        red: {
          400: "hsl(var(--grid-red-400))",
          700: "hsl(var(--grid-red-700))",
        },
        purple: {
          400: "hsl(var(--grid-purple-400))",
          700: "hsl(var(--grid-purple-700))",
        },
      },
    },
  },
};

export default config;