tailwind.config.js raw

   1  /** @type {import('tailwindcss').Config} */
   2  export default {
   3    darkMode: ['class'],
   4    content: ['./index.html', './src/**/*.{ts,tsx}'],
   5    theme: {
   6      fontFamily: {
   7        sans: ['"Noto Sans"', '"Noto Color Emoji"', 'ui-sans-serif', 'system-ui', 'sans-serif']
   8      },
   9      extend: {
  10        borderRadius: {
  11          lg: 'var(--radius)',
  12          md: 'calc(var(--radius) - 2px)',
  13          sm: 'calc(var(--radius) - 4px)',
  14          xl: 'calc(var(--radius) + 4px)',
  15          '2xl': 'calc(var(--radius) + 8px)'
  16        },
  17        colors: {
  18          chrome: {
  19            background: 'hsl(var(--chrome-background))'
  20          },
  21          surface: {
  22            background: 'hsl(var(--surface-background))'
  23          },
  24          background: 'hsl(var(--background))',
  25          foreground: 'hsl(var(--foreground))',
  26          card: {
  27            DEFAULT: 'hsl(var(--card))',
  28            foreground: 'hsl(var(--card-foreground))'
  29          },
  30          popover: {
  31            DEFAULT: 'hsl(var(--popover))',
  32            foreground: 'hsl(var(--popover-foreground))'
  33          },
  34          primary: {
  35            DEFAULT: 'hsl(var(--primary))',
  36            foreground: 'hsl(var(--primary-foreground))',
  37            hover: 'hsl(var(--primary-hover))'
  38          },
  39          secondary: {
  40            DEFAULT: 'hsl(var(--secondary))',
  41            foreground: 'hsl(var(--secondary-foreground))'
  42          },
  43          muted: {
  44            DEFAULT: 'hsl(var(--muted))',
  45            foreground: 'hsl(var(--muted-foreground))'
  46          },
  47          accent: {
  48            DEFAULT: 'hsl(var(--accent))',
  49            foreground: 'hsl(var(--accent-foreground))'
  50          },
  51          destructive: {
  52            DEFAULT: 'hsl(var(--destructive))',
  53            foreground: 'hsl(var(--destructive-foreground))'
  54          },
  55          border: 'hsl(var(--border))',
  56          input: 'hsl(var(--input))',
  57          ring: 'hsl(var(--ring))',
  58          chart: {
  59            1: 'hsl(var(--chart-1))',
  60            2: 'hsl(var(--chart-2))',
  61            3: 'hsl(var(--chart-3))',
  62            4: 'hsl(var(--chart-4))',
  63            5: 'hsl(var(--chart-5))'
  64          },
  65          highlight: 'hsl(var(--highlight))'
  66        },
  67        animation: {
  68          shimmer: 'shimmer 3s ease-in-out infinite',
  69          'accordion-down': 'accordion-down 0.2s ease-out',
  70          'accordion-up': 'accordion-up 0.2s ease-out'
  71        },
  72        keyframes: {
  73          'accordion-down': {
  74            from: { height: '0' },
  75            to: { height: 'var(--radix-accordion-content-height)' }
  76          },
  77          'accordion-up': {
  78            from: { height: 'var(--radix-accordion-content-height)' },
  79            to: { height: '0' }
  80          }
  81        }
  82      }
  83    },
  84    plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')]
  85  }
  86