How to define a custom theme or colors with Astro and Tailwind css

Question

I have a monorepo (Nrwl) in which I have an Astro app which uses Tailwind css.

Everything is running fine, but now I would like to do something with colors / theming

My `tailwind.config.cjs' contains the following:

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: [],
};

Now, when I google I find theme configs like this

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]
            }
        }
    },
    ...

More examples of this can be found on the Tailwind site itself here.

But nowhere it is explained how I can integrate this into my config. Any suggestions how I can use this or create my own colors?

Answer 1

There is a page in the documentation about color customization that may be of interest to you.

For adding additional colors to Tailwind, define color values in theme.extend.colors. You can arbitrarily nest as many objects as you'd like:

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: {
           colors: {
               foo: '#123',
               many: {
                   nested: {
                       objects: {
                           here: '#456',
                       },
                   },
               },
           },
       },
   },
   plugins: [],
};

This configuration would then give you color values you could use with utility classes like:

<div class="bg-many-nested-objects-here text-foo">