Tailwind CSS - 主题配置

---

---

Tailwind CSS 主题配置指定项目的主题。

在 `tailwind.config.js` 中，“主题”部分允许您定义项目的调色板、类型比例、字体、断点、边框半径值等等。

/** @type {import('tailwindcss').Config} */
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',
      }
    }
  }
}

主题结构

`tailwind.config.js` 的“主题”部分包含一系列键，例如 `screens`、`colors`、`spacing` 和 `corePlugins` 用于自定义。

屏幕尺寸

`screens` 键允许您设置项目中的响应式断点。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

颜色

`colors` 键允许您设置项目的全局调色板。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

间距

`spacing` 键允许您设置项目的全局间距和大小比例。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
    },
  }
}

核心插件

主题设置允许您为每个插件选择选项。例如，`borderRadius` 设置圆角样式。

module.exports = {
    theme: {
        borderRadius: {
        'none': '0',
        'sm': '.125rem',
        DEFAULT: '.25rem',
        'lg': '.5rem',
        'full': '9999px',
        },
    }
    }

名称成为类名，值设置样式。这就是 Tailwind 对所有插件的工作方式。

.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }

自定义默认主题

您的项目会自动使用默认主题设置。如果您想更改它们，您可以自定义主题以满足您的需求。

扩展默认主题

`theme.extend` 选项允许您向主题添加新值，同时保留默认值。这将结合新值和现有值，为您创建新的类。

例如，这里我们扩展 `fontFamily` 属性以添加 `font-display` 类，该类可以更改元素上使用的字体

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif', // Adds a new `font-display` class
      }
    }
  }
}

添加到您的主题后，您可以像使用任何其他字体系列实用程序一样使用它

<h1 class="font-display">
  This uses the Oswald font
</h1>

覆盖默认主题

您可以通过直接在 `tailwind.config.js` 中的主题部分添加覆盖来更改默认主题选项。

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

引用其他值

使用闭包来引用其他主题值。它为您提供了一个 `theme()` 函数，可以使用点表示法访问其他值。

例如，您可以通过在您的 `backgroundSize` 配置中引用 `theme('spacing')` 来为 `spacing` 比例中的每个值生成 `background-size` 实用程序。

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    spacing: {
        // ...
    },
    backgroundSize: ({ theme }) => ({
        auto: 'auto',
        cover: 'cover',
        contain: 'contain',
        ...theme('spacing')
    })
    }
}

**注意：**对顶级主题键使用函数。

/** @type {import('tailwindcss').Config} */
module.exports = {
    theme: {
    fill: ({ theme }) => ({
        gray: theme('colors.gray')
    })
    }
}

引用默认主题

要使用默认主题中的值，请从 `tailwindcss/defaultTheme` 导入它。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

禁用整个核心插件

要禁用核心插件，请在 `corePlugins` 中将其设置为 `false`，而不是在主题配置中设置为空对象。

/** Don't Do */
  
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {},
  }
}

/** Always Do */
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
  opacity: false,
}
}

配置参考

大多数主题对象键与 Tailwind 的核心插件匹配，除了 `screens`、`colors` 和 `spacing`。一些插件没有主题键，因为它们只接受固定值。您还可以使用 `theme.extend` 键扩展默认主题。

所有这些键也可以在 `theme.extend` 键下使用，以启用扩展默认主题。