CODEWITHSUNDEEP
tailwind-css
abc
abc

Reputation: 1559

Tailwind CSS: how to use color variables in tailwind.config.js

I want to use color variable (default, or extended) to my extended theme like:

module.exports = {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {
            colors: {
                lime: {
                    '100': 'green'
                }
            },
            backgroundColor: {
                skin: {
                    base: 'bg-red-500',
                    secondary: 'lime-100',
                },
            },
        },
    },
    plugins: [],
};

but this isn't working. How can I have a class bg-skin-base equivalent to bg-red-500 and another class bg-skin-secondary that is equivalent to bg-[green]?

Upvotes: 2

Views: 12211

Answers (1)

GUID_33
GUID_33

Reputation: 800

There isn't a backgroundColor. Any colors added under extend > colors are available for text-, bg-, border- etc.

Just add skin under colors and you should be good.

tailwind docs reference

const colors = require("tailwindcss/colors")

extend: {
   colors: {
      lime: {
        '100': 'green'
      },
      skin: {
        base: '#yourhex",
        secondary: '#yourhex",
        third: colors.violet["500"]
      }
   },
}

You can't use bg-red-500 like you have in your example for base. If you are looking to alias a tailwind color you can either use the hex or use tailwind colors by const colors = require("tailwindcss/colors") and then you can do colors.red[500] or whatever color you want.

Upvotes: 5

Related Questions