Tailwind：配置配置文件后如何访问默认内容？

Posted 2023-03-07

【中文标题】Tailwind：配置配置文件后如何访问默认内容？

【英文标题】：Tailwind: How to access default things after configuring the config file?

【发布时间】：2021-01-05 21:18:16

【问题描述】：

为了让用户能够在我的网站中选择他们的配色方案，我在 style.css 文件中添加了一些主题。比如一个是“主题灯”

.theme-light 
  --color-bg-primary: theme('colors.white');
  --color-bg-typing: theme('colors.white');
  --color-bg-input: theme('colors.white');
  --color-bg-redo: theme('colors.blue.500');
  --color-bg-redo-hover: theme('colors.red.500');
  --color-bg-nav: theme('colors.red.500');
  --color-bg-nav-active: theme('colors.red.500');
  --color-text-primary: theme('colors.gray.900');
  --color-text-secondary: theme('colors.gray.600');
  --color-text-current: theme('colors.gray.900');
  --color-text-correct: theme('colors.green.400');
  --color-text-wrong: theme('colors.red.400');
  --color-text-stats: theme('colors.gray.600');
  --color-placeholder-primary: theme('colors.gray.600');

我像这样编辑了我的tailwind.config.js 文件：

module.exports = 
  future: 
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  ,
  purge: [],
  theme: 
    backgroundColor: 
      primary: 'var(--color-bg-primary)',
      typing: 'var(--color-bg-typing)',
      input: 'var(--color-bg-input)',
      redo: 'var(--color-bg-redo)',
      'redo-hover': 'var(--color-bg-redo-hover)',
      nav: 'var(--color-bg-nav)',
      'nav-active': 'var(--color-bg-nav-active)',
    ,
    textColor: 
      primary: 'var(--color-text-primary)',
      secondary: 'var(--color-text-secondary)',
      current: 'var(--color-text-current)',
      correct: 'var(--color-text-correct)',
      wrong: 'var(--color-text-wrong)',
      stats: 'var(--color-text-stats)',
    ,
    placeholderColor: 
      primary: 'var(--color-placeholder-primary)',
    ,
  ,
  variants: ,
  plugins: [require('@tailwindcss/typography')],
;

我的问题是：现在我无法像以前那样在 html 中设置任何内容（例如“text-blue-400”或“text-opacity-50”）。我怎样才能让默认配置再次起作用？

【参考方案1】：

哦，哈哈。我只需要使用扩展：https://tailwindcss.com/docs/theme