主题配置
自定义项目主题
tailwind.config.js
文件的 theme
部分是您定义项目颜色调色板、字体大小比例、字体、断点、边框半径值等的地方。
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'yellow': '#ffc82c',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}
我们提供了一个合理的默认主题,其中包含非常丰富的值集来帮助您开始,但不要害怕更改或扩展它;鼓励您尽可能自定义它,以适应您的设计目标。
上一篇:Content 配置
下一篇:自定义 Screens