开发TailwindCSS插件时如何查看theme配置的所有值？

1. 查看默认主题源码 #

Tailwind的所有默认主题配置都在本地依赖的tailwindcss/defaultTheme.js文件里。你可以直接打开这个文件，里面包含了fontSize、colors、spacing、borderRadius等所有默认属性的完整取值。比如默认fontSize部分的结构大概是这样：

fontSize: {
  xs: ['0.75rem', { lineHeight: '1rem' }],
  sm: ['0.875rem', { lineHeight: '1.25rem' }],
  base: ['1rem', { lineHeight: '1.5rem' }],
  lg: ['1.125rem', { lineHeight: '1.75rem' }],
  xl: ['1.25rem', { lineHeight: '1.75rem' }],
  '2xl': ['1.5rem', { lineHeight: '2rem' }],
  // ...更多尺寸
}

2. 打印当前主题配置 #

在你的插件代码里直接打印theme()的返回值，就能看到当前项目合并了默认和自定义后的完整主题配置。比如修改你的代码：

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addBase, addComponents, addUtilities, theme }) {
      // 打印所有fontSize配置
      console.log(theme('fontSize'));
      // 打印完整主题配置
      console.log(theme());
      
      addBase({
        'h1': {
          fontSize: theme('fontSize.2xl'),
        },
        'h2': {
          fontSize: theme('fontSize.xl'),
        },
      })
    })
  ]
}

运行Tailwind构建命令后，终端会输出对应的配置内容，你可以直接查看所有可用的属性和取值。

3. 使用VS Code的Tailwind IntelliSense插件 #

安装这个插件后，当你在代码里输入theme('')时，插件会自动弹出所有可用的主题属性提示；输入theme('fontSize.')时，会列出所有字体尺寸的键（比如2xl、xl等），不用手动查文件就能快速找到需要的取值。

内容的提问来源于stack exchange，提问作者Epple