如何在Tailwind v4的CSS优先方案中迁移并配置主题

Tailwind v4 不再需要 tailwind.config.ts 配置文件，所有主题定制需通过 CSS 指令完成。以下是将原有 v3 配置迁移到 v4 的具体实现：

1. 启用类式深色模式 #

原有配置中 darkMode: 'class'，在 v4 中通过 CSS 指令启用：

@tailwind dark(class);

2. 自定义断点（Screens） #

添加 xs: 475px 断点：

@tailwind screens {
  xs: '475px';
}

3. 自定义颜色（Colors） #

迁移原有颜色体系：

@tailwind colors {
  primary: {
    100: '#FFE8F0',
    DEFAULT: '#EE2B69'
  },
  secondary: '#FBE843',
  black: {
    100: '#333333',
    200: '#141413',
    300: '#7D8087',
    DEFAULT: '#000000'
  },
  white: {
    100: '#F7F7F7',
    DEFAULT: '#FFFFFF'
  }
}

4. 自定义字体族（Font Family） #

迁移 work-sans 字体配置：

@tailwind fontFamilies {
  'work-sans': ['var(--font-work-sans)'];
}

5. 自定义圆角（Border Radius） #

迁移基于 --radius 变量的圆角配置：

@tailwind borderRadius {
  lg: 'var(--radius)',
  md: 'calc(var(--radius) - 2px)',
  sm: 'calc(var(--radius) - 4px)'
}

6. 自定义阴影（Box Shadow） #

迁移自定义阴影样式：

@tailwind boxShadows {
  100: '2px 2px 0px 0px rgb(0, 0, 0)',
  200: '2px 2px 0px 2px rgb(0, 0, 0)',
  300: '2px 2px 0px 2px rgb(238, 43, 105)'
}

完整整合代码 #

将以上所有内容放入主 CSS 文件（如 styles.css）中，配合基础 Tailwind 指令使用：

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind dark(class);

@tailwind screens {
  xs: '475px';
}

@tailwind colors {
  primary: {
    100: '#FFE8F0',
    DEFAULT: '#EE2B69'
  },
  secondary: '#FBE843',
  black: {
    100: '#333333',
    200: '#141413',
    300: '#7D8087',
    DEFAULT: '#000000'
  },
  white: {
    100: '#F7F7F7',
    DEFAULT: '#FFFFFF'
  }
}

@tailwind fontFamilies {
  'work-sans': ['var(--font-work-sans)'];
}

@tailwind borderRadius {
  lg: 'var(--radius)',
  md: 'calc(var(--radius) - 2px)',
  sm: 'calc(var(--radius) - 4px)'
}

@tailwind boxShadows {
  100: '2px 2px 0px 0px rgb(0, 0, 0)',
  200: '2px 2px 0px 2px rgb(0, 0, 0)',
  300: '2px 2px 0px 2px rgb(238, 43, 105)'
}

注意：需确保已正确安装并配置 Tailwind v4 构建工具链，这些 CSS 指令会被编译器处理生成对应的实用类。

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