如何在TailwindCSS v4中配置并使用自定义颜色主题？

问题背景 #

在Tailwind CSS v3中，我通过以下配置自定义了主题颜色、字体、阴影等样式，并设置了基于选择器的深色模式：

theme: {
  extend: {
    colors: {
      lightHover: '#fcf4ff',
      darkHover: '#2a004a',
      darktheme: '#11001f',
    },
    fontFamily: {
      Outfit: ["Outfit", "sans-serif"],
      Ovo: ["Ovo", "serif"]
    },
    boxShadow: {
      'black': '4px 4px 0 #000',
      'white': '4px 4px 0 #fff',
    },
    gridTemplateColumns: {
      'auto': 'repeat(auto-fit, minmax(200px, 1fr))'
    }
  },
},
darkMode: 'selector',

使用时可以通过dark:bg-darktheme这类类名，给深色模式下的元素应用自定义的深色背景色，而非默认黑色。但升级到v4后，找不到实现相同效果的方法，想知道是否只能用默认类，以及正确的配置方式。

解决方案 #

Tailwind CSS v4中实现自定义深色主题颜色的核心逻辑和v3基本一致，仅部分配置细节有调整：

1. 配置文件写法
   v4不再需要单独设置darkMode: 'selector'，因为它默认就采用.dark选择器作为深色模式的触发条件。自定义主题配置可直接沿用v3的extend结构，无需大幅修改：

   /** @type {import('tailwindcss').Config} */
   export default {
     content: ["./src/**/*.{html,js}"], // 根据你的项目实际路径调整
     theme: {
       extend: {
         colors: {
           lightHover: '#fcf4ff',
           darkHover: '#2a004a',
           darktheme: '#11001f',
         },
         fontFamily: {
           Outfit: ["Outfit", "sans-serif"],
           Ovo: ["Ovo", "serif"]
         },
         boxShadow: {
           'black': '4px 4px 0 #000',
           'white': '4px 4px 0 #fff',
         },
         gridTemplateColumns: {
           'auto': 'repeat(auto-fit, minmax(200px, 1fr))'
         }
       },
     },
     // v4默认开启selector模式，无需额外配置darkMode
   }
   

2. 使用方式
   和v3完全相同，直接通过dark:前缀结合自定义颜色类名即可：

   <div class="dark:bg-darktheme"></div>
   

   只要页面根元素（或目标元素的父元素）添加了.dark类，该元素就会自动应用自定义的深色背景色，完全不需要依赖默认的bg-black类。

3. 其他注意事项

   • 确保安装的是Tailwind CSS v4版本，可通过npm install tailwindcss@latest完成升级
   • 配置文件中的content路径要正确覆盖项目内所有模板文件，否则自定义样式无法被生成

内容的提问来源于stack exchange，提问作者卢佳楠