解决方案:使用CSS变量.
main.css
:root .theme-1 {
--tw-text-opacity: 1;
--color-primary-50: 235,242,254;
--color-primary-100: 215,230,253;
--color-primary-200: 176,205,251;
--color-primary-300: 137,180,250;
--color-primary-400: 98,155,248;
--color-primary-500: 59,130,246;
--color-primary-600: 11,97,238;
--color-primary-700: 8,75,184;
--color-primary-800: 6,53,131;
--color-primary-900: 4,31,77;
}
tailwind.config.js
colors: {
...
primary: {
50: 'rgba(var(--color-primary-50), var(--tw-text-opacity))',
100:'rgba(var(--color-primary-100), var(--tw-text-opacity))',
200:'rgba(var(--color-primary-200), var(--tw-text-opacity))',
300:'rgba(var(--color-primary-300), var(--tw-text-opacity))',
400:'rgba(var(--color-primary-400), var(--tw-text-opacity))',
500:'rgba(var(--color-primary-500), var(--tw-text-opacity))',
600:'rgba(var(--color-primary-600), var(--tw-text-opacity))',
700:'rgba(var(--color-primary-700), var(--tw-text-opacity))',
800:'rgba(var(--color-primary-800), var(--tw-text-opacity))',
900:'rgba(var(--color-primary-900), var(--tw-text-opacity))'
}
...
现在,您可以使用text-primary-500,只需一个父类即可更改 colored颜色