如何在Astro与Tailwind CSS中自定义主题或颜色？

问题背景 #

我拥有一个基于Nrwl的monorepo，其中包含一个使用Tailwind CSS的Astro应用，目前运行一切正常。现在我希望进行颜色/主题自定义操作，我的tailwind.config.cjs配置如下：

const {
    createGlobPatternsForDependencies,
} = require('@nxtensions/astro/tailwind');
const { join } = require('path');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        join(
            __dirname,
            'src/**/!(*.stories|*.spec).{astro,html,js,jsx,md,svelte,ts,tsx,vue}'
        ),
        ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {
       extend: {},
   },
   plugins: [],
};

我找到了如下主题配置示例，但不知道如何将其集成到现有配置中：

const colors = require('tailwindcss/colors')

module.exports = {
    /**
     * Color Palette - Purple Heart
     */
     purpleheart: {
        colors: {
            primary: colors.purple[700],
            secondary: colors.purple[800],
            dark: {
                primary: colors.purple[300],
                secondary: colors.purple[500]
            },
            accent: {
                gray: {
                    light: colors.gray[300],
                    dark: colors.gray[500]
                },
                default: colors.blue[700]
            }
        }
    },
    ...

解决方案 #

你找到的示例是自定义主题对象的写法，需要调整后放到Tailwind配置的theme或theme.extend节点下，具体步骤如下：

1. 引入Tailwind内置颜色（可选） #

如果需要用Tailwind提供的预设颜色，先在配置顶部引入tailwindcss/colors。

2. 将自定义颜色配置放入theme.extend.colors #

推荐使用extend来添加自定义颜色，这样不会覆盖Tailwind默认的颜色体系；如果想完全替换默认颜色，直接放到theme.colors下即可。

修改后的完整配置如下：

const {
    createGlobPatternsForDependencies,
} = require('@nxtensions/astro/tailwind');
const { join } = require('path');
const colors = require('tailwindcss/colors'); // 引入内置颜色

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        join(
            __dirname,
            'src/**/!(*.stories|*.spec).{astro,html,js,jsx,md,svelte,ts,tsx,vue}'
        ),
        ...createGlobPatternsForDependencies(__dirname),
   ],
   // 可选：开启类模式暗黑模式，方便切换主题
   darkMode: 'class',
   theme: {
       extend: {
           colors: {
               primary: colors.purple[700],
               secondary: colors.purple[800],
               dark: {
                   primary: colors.purple[300],
                   secondary: colors.purple[500]
               },
               accent: {
                   gray: {
                       light: colors.gray[300],
                       dark: colors.gray[500]
                   },
                   default: colors.blue[700]
               }
           }
       },
   },
   plugins: [],
};

3. 使用自定义颜色 #

配置完成后，就可以在Astro组件或HTML中直接使用这些颜色类：

• 基础颜色：bg-primary、text-secondary
• 嵌套颜色：text-dark-primary、border-accent-gray-light
• 暗黑模式适配（需开启darkMode: 'class'）：在根元素添加dark类后，使用dark:text-dark-primary这样的类切换暗黑模式下的颜色

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