Portfolio/tailwind.config.js at main · ZeroCodeZeroBug/Portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["class"],
  content: [
    './pages/**/*.{js,jsx}',
    './components/**/*.{js,jsx}',
    './app/**/*.{js,jsx}',
    './src/**/*.{js,jsx}',
  ],
  theme: {
    extend: {
      screens: {
        'xs': '475px',
      },
      fontFamily: {
        sans: [
          'Inter',
          'Graphik',
          '"Graphik Web"',
          'system-ui',
          '-apple-system',
          '"Helvetica Neue"',
          'Arial',
          'sans-serif',
        ],
        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
      },
      backdropBlur: {
        xs: '2px',
      },
      letterSpacing: {
        'display': '-0.03em',
        'display-lg': '-0.02em',
        'h1': '-0.018em',
        'h2': '-0.012em',
        'h3': '-0.005em',
        'eyebrow': '0.08em',
      },
      colors: {
        border: 'hsl(var(--border))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        ring: 'hsl(var(--ring))',
        input: 'hsl(var(--input))',
        canvas: {
          DEFAULT: '#0a0a0a',
          pure: '#000000',
        },
        surface: {
          DEFAULT: '#141414',
          soft: '#1c1c1c',
          strong: '#262626',
          light: '#ffffff',
          'light-soft': '#f2f2f2',
        },
        ink: {
          DEFAULT: '#ffffff',
          body: '#e6e6e6',
          muted: '#a3a3a3',
          soft: '#6b6b6b',
          'on-light': '#0a0a0a',
          'on-light-mute': '#525252',
        },
        hairline: {
          DEFAULT: '#2e2e2e',
          strong: '#4d4d4d',
          'on-light': '#e0e0e0',
        },
        brand: {
          DEFAULT: '#a600ff',
          bright: '#be4bff',
          deep: '#7d00c4',
          soft: 'rgba(166,0,255,0.12)',
        },
        success: {
          DEFAULT: '#3ad29f',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 4px)',
        sm: 'calc(var(--radius) - 8px)',
        xl: '12px',
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}