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

Question

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

.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”）。我怎样才能使默认配置再次工作？

Answer 1

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

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

Tailwind: How to access default things after configuring the config file?

css

tailwind-css