自定义样式

添加自定义样式到Tailwind的最佳实践。

在使用框架时，通常最大的挑战是弄清楚在需要框架无法为您处理的内容时应该做什么。

Tailwind 从头开始设计，旨在具有可扩展性和可定制性，因此无论您正在构建什么，都永远不会感觉像是在与框架作斗争。

本指南涵盖了诸如自定义设计令牌、如何在必要时打破这些约束、添加自己的自定义 CSS 以及使用插件扩展框架等主题。

自定义主题

如果您想要更改诸如调色板、间距比例、排版比例或断点等事物，请将您的自定义内容添加到 tailwind.config.js 文件的主题部分：

  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.       'pink': '#ff49db',
  12.       'orange': '#ff7849',
  13.       'green': '#13ce66',
  14.       'gray-dark': '#273444',
  15.       'gray': '#8492a6',
  16.       'gray-light': '#d3dce6',
  17.     },
  18.     fontFamily: {
  19.       sans: ['Graphik', 'sans-serif'],
  20.       serif: ['Merriweather', 'serif'],
  21.     },
  22.     extend: {
  23.       spacing: {
  24.         '128': '32rem',
  25.         '144': '36rem',
  26.       },
  27.       borderRadius: {
  28.         '4xl': '2rem',
  29.       }
  30.     }
  31.   }
  32. }

了解更多关于自定义主题的主题配置文档。