blog/tailwind.config.js at main · qsthhm/blog · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        page: {
          light: '#ffffff',
          dark: '#171717',
        },
        neutral: {
          50: '#fafafa',
          100: '#f5f5f5',
          200: '#e5e5e5',
          300: '#d4d4d4',
          400: '#a3a3a3',
          500: '#737373',
          600: '#525252',
          700: '#404040',
          800: '#262626',
          900: '#171717',
          950: '#0a0a0a',
        },
      },
      maxWidth: {
        'content': '680px',  // 内容区域最大宽度
      },
      width: {
        'logo': '64px',      // Logo宽度
      },
      height: {
        'logo': '44px',      // Logo高度
        'nav': '60px',       // 导航栏高度
      },
      margin: {
        'nav': '60px',       // 导航栏高度的 margin
      },
      spacing: {
        'article-gap': '32px',  // 文章卡片之间的间距
        'row-gap': '40px',      // 行间距
      },
      aspectRatio: {
        'thumbnail': '16 / 9',  // 缩略图比例
        'square': '1 / 1',      // 正方形比例
      },
      fontSize: {
        'page-title': ['2rem', '1.3'],      // 页面标题大小和行高
        'article-title': ['1.125rem', '1.5'] // 文章标题大小和行高
      },
      padding: {
        'card-hover': '16px',  // 卡片hover时的内边距
      },
      lineHeight: {
        'paragraph': '1.75',  // 添加自定义行高
      },
      lineClamp: {
        1: '1',
        2: '2',
        3: '3',
      },
      typography: (theme) => ({
        DEFAULT: {
          css: {
            fontSize: '1.125rem', // 增大基础字号
            lineHeight: '1.75',    // 调整行高
            p: {
              marginBottom: '1.5em',
            },
            'code::before': {
              content: '""',
            },
            'code::after': {
              content: '""',
            },
            code: {
              fontWeight: '400',
              whiteSpace: 'pre-wrap',
              wordBreak: 'break-all',
            },
            maxWidth: 'none',
            color: theme('colors.neutral.900'),
            a: {
              color: theme('colors.blue.600'),
              '&:hover': {
                color: theme('colors.blue.700'),
              },
            },
            'h1,h2,h3,h4,h5,h6': {
              color: theme('colors.neutral.900'),
              'scroll-margin-top': '60px',
            },
            strong: {
              color: theme('colors.neutral.900'),
              fontWeight: '600',
            },
            code: {
              color: theme('colors.neutral.900'),
              fontWeight: '400',
            },
          },
        },
        dark: {
          css: {
            color: theme('colors.neutral.200'),
            a: {
              color: theme('colors.blue.400'),
              '&:hover': {
                color: theme('colors.blue.300'),
              },
            },
            'h1,h2,h3,h4,h5,h6': {
              color: theme('colors.neutral.100'),
            },
            strong: {
              color: theme('colors.neutral.100'),
            },
            code: {
              color: theme('colors.neutral.100'),
            },
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/line-clamp'),
  ],
}