NSG_PORTAL_V2/uno.config.ts

import type { ConfigBase } from "unocss";

import {
  defineConfig,
  transformerVariantGroup,
  transformerDirectives,
  presetWebFonts,
  presetUno,
  presetMini,
} from "unocss";

export default defineConfig({
  safelist: [],

  theme: {
    colors: {
      'primary': '#ED1C24',
      'gray': {
        500: '#bdbdbd',
        600:' #757575'
      },
      black: {
        Default: '#222',
        '500': '#222',
        '400': '#4f4f4f'
      }
      // 'red': '#ff0018',
      // 'blue': '#2d6cf6',
      // 'brown-700': '#99553D',
      // 'gray-100': '#f5f5f5',
      // 'gray-200': '#eee',
      // 'gray-400': '#bdbdbd',
      // 'gray-600': '#757575',
      // 'gray-700': '#616161',
      // 'green-100': '#2ED0A9',
      // 'yellow-700': '#eaa23e',
    },
  },

  shortcuts: [
    {
      "after:no-content": "after:content-['']",
      "before:no-content": "before:content-['']",
      'container-xxl': 'px-[8px] mx-auto w-full sm:w-620px md:w-760px lg:w-980px xl:w-1100px 2xl:w-1200px',
      'container-long': 'px-2 mx-auto w-full sm:w-620px md:w-760px lg:w-980px xl:w-1100px 2xl:w-1200px',
      // Size tiền phong
      'container-tp': "px-30px mx-auto w-full max-w-1385px"
    },
  ],
  rules: [
    [
      "text-fill-transparent",
      {
        "-webkit-text-fill-color": "transparent",
        "text-fill-color": "transparent",
      },
    ],
    [
      "backdrop-blur-xs",
      {
        "backdrop-filter": "blur(2px)",
        "-webkit-backdrop-filter": "blur(2px)",
      },
    ],
    [
      "max-w-6xl",
      {
        "max-width": "60rem",
      },
    ],
    [
      "max-w-8xl",
      {
        "max-width": "85.375rem",
      },
    ],
  ],
  extractors: [],
  presets: [
    presetUno(),
    presetWebFonts({
      provider: "google",
      fonts: {
        nunito: "Nunito",
        playfair: ['Playfair Display', 'sans-serif'],
        beVietnam: ['Be Vietnam Pro', 'sans-serif'],
        arial: "arial",
        archivo: ["Archivo", 'sans-serif'],
        merriweather: ["Merriweather", 'serif'],
        gelasio: ["Gelasio", 'serif'],
        raleway: ["raleway", 'sans-serif'],
      },
    }),
  ],
  transformers: [transformerVariantGroup(), transformerDirectives()],
}) satisfies ConfigBase;