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      extend: {
   7        borderRadius: {
   8          lg: 'var(--radius)',
   9          md: 'calc(var(--radius) - 2px)',
  10          sm: 'calc(var(--radius) - 4px)'
  11        },
  12        colors: {
  13          surface: {
  14            background: 'hsl(var(--surface-background))'
  15          },
  16          background: 'hsl(var(--background))',
  17          foreground: 'hsl(var(--foreground))',
  18          card: {
  19            DEFAULT: 'hsl(var(--card))',
  20            foreground: 'hsl(var(--card-foreground))'
  21          },
  22          popover: {
  23            DEFAULT: 'hsl(var(--popover))',
  24            foreground: 'hsl(var(--popover-foreground))'
  25          },
  26          primary: {
  27            DEFAULT: 'hsl(var(--primary))',
  28            foreground: 'hsl(var(--primary-foreground))',
  29            hover: 'hsl(var(--primary-hover))'
  30          },
  31          secondary: {
  32            DEFAULT: 'hsl(var(--secondary))',
  33            foreground: 'hsl(var(--secondary-foreground))'
  34          },
  35          muted: {
  36            DEFAULT: 'hsl(var(--muted))',
  37            foreground: 'hsl(var(--muted-foreground))'
  38          },
  39          accent: {
  40            DEFAULT: 'hsl(var(--accent))',
  41            foreground: 'hsl(var(--accent-foreground))'
  42          },
  43          destructive: {
  44            DEFAULT: 'hsl(var(--destructive))',
  45            foreground: 'hsl(var(--destructive-foreground))'
  46          },
  47          border: 'hsl(var(--border))',
  48          input: 'hsl(var(--input))',
  49          ring: 'hsl(var(--ring))',
  50          chart: {
  51            1: 'hsl(var(--chart-1))',
  52            2: 'hsl(var(--chart-2))',
  53            3: 'hsl(var(--chart-3))',
  54            4: 'hsl(var(--chart-4))',
  55            5: 'hsl(var(--chart-5))'
  56          },
  57          highlight: 'hsl(var(--highlight))'
  58        }
  59      }
  60    },
  61    plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')]
  62  }
  63