主题配置

自定义项目主题

tailwind.config.js 文件的 theme 部分是您定义项目颜色调色板、字体大小比例、字体、断点、边框半径值等的地方。

  1. module.exports = {
  2.   theme: {
  3.     screens: {
  4.       sm: '480px',
  5.       md: '768px',
  6.       lg: '976px',
  7.       xl: '1440px',
  8.     },
  9.     colors: {
  10.       'blue': '#1fb6ff',
  11.       'purple': '#7e5bef',
  12.       'pink': '#ff49db',
  13.       'orange': '#ff7849',
  14.       'green': '#13ce66',
  15.       'yellow': '#ffc82c',
  16.       'gray-dark': '#273444',
  17.       'gray': '#8492a6',
  18.       'gray-light': '#d3dce6',
  19.     },
  20.     fontFamily: {
  21.       sans: ['Graphik', 'sans-serif'],
  22.       serif: ['Merriweather', 'serif'],
  23.     },
  24.     extend: {
  25.       spacing: {
  26.         '128': '32rem',
  27.         '144': '36rem',
  28.       },
  29.       borderRadius: {
  30.         '4xl': '2rem',
  31.       }
  32.     }
  33.   }
  34. }

我们提供了一个合理的默认主题，其中包含非常丰富的值集来帮助您开始，但不要害怕更改或扩展它；鼓励您尽可能自定义它，以适应您的设计目标。