Alias/Shortcuts with v4

[jeannen]

Hi!

I'm trying the v4, and I was wondering if there was a way to quickly refer to colors like in v3. For example, I used to define aliases for colours in my tailwind config, so I could quickly change them if needed

// tailwind.config.js
const colors = require('tailwindcss/colors');

export default {
    theme: {
        extend: {
            colors: {
                primary: colors.indigo,
                accent: colors.rose,
                neutral: colors.slate,
            },
        }
    }
}
// ...

Then I could use text-primary-500

How can I do the same with v4 ? The only thing I see now is to write each color individually

@theme {
    --color-primary-50: var(--color-indigo-50);
    --color-primary-100: var(--color-indigo-100);
    --color-primary-200: var(--color-indigo-200);
    /* etc */

Is there a better way? That's 10x more lines, and a bit annoying to change

[adamwathan]

Yeah I really want to figure this out as well but have been struggling to get the syntax right, do you have any ideas? 🤔

Best I've come up with is this:

@theme {
  --color-primary-*: theme(--color-indigo-*);
}

But that means you need to also have indigo in your palette with that name, no way to sort of import it just to alias it but not have it in your theme.