如何从覆盖中选择一种颜色作为默认颜色？

Question

我已经为我的 nuxt-tailwind 项目创建了一个配色方案，但我在这里遇到了问题。我需要用这样的不透明度值调用类名：text-blue-500，bg-blue-500 一直。否则，样式将不会被使用。

当我没有指定 500 不透明度时，如何让它自动选择它？更清楚地说，我只想在不需要不透明度时这样指定：text-blue，bg-blue。

我找到了this question，但我认为它不符合我的情况，因为我没有为该类使用任何自定义名称。

请查看我的顺风配置和我的一个组件，在此先感谢！ tailwind.config.js

/*
 ** TailwindCSS Configuration File
 **
 ** Docs: https://tailwindcss.com/docs/configuration
 ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 */
module.exports = {
  important: true,
  theme: {
    // compatible with @nuxtjs/color-mode
    darkSelector: '.dark-mode',
    extend: {
      colors: {
        // all colors were generated from here: https://hihayk.github.io/scale
        white: 'white',
        black: '#2C3E50',
        blue: {
          900: '#052B80',
          800: '#09369F',
          700: '#0E43BF',
          600: '#134FDF',
          500: '#1A5CFF',
          400: '#438BFF',
          300: '#6FB4FF',
          200: '#9DD5FF',
          100: '#CDEFFF',
        },
        green: {
          900: '#30420A',
          800: '#315C0F',
          700: '#287514',
          600: '#1A8D1D',
          500: '#21A543',
          400: '#38B34B',
          300: '#50C156',
          200: '#6FCD69',
          100: '#91D883',
        },
        orange: {
          900: '#ADA500',
          800: '#C2B300',
          700: '#D6C000',
          600: '#EBCB00',
          500: '#FFD500',
          400: '#FFDD32',
          300: '#FFE464',
          200: '#FFEB95',
          100: '#FFF3C7',
        },
        red: {
          900: '#AD002A',
          800: '#C20031',
          700: '#D6003A',
          600: '#E50043',
          500: '#EF064D',
          400: '#FC3273',
          300: '#FF6498',
          200: '#FF95BC',
          100: '#FFC7DD',
        },
        teal: {
          900: '#007699',
          800: '#0081A5',
          700: '#008AB0',
          600: '#0193B9',
          500: '#099BC1',
          400: '#32B9D5',
          300: '#64D2E5',
          200: '#95E7F1',
          100: '#C7F6FA',
        },
        grey: {
          900: '#515F6A',
          800: '#5C6A76',
          700: '#667581',
          600: '#71808C',
          500: '#7C8B97',
          400: '#94A3AC',
          300: '#ADBAC1',
          200: '#C7D1D6',
          100: '#E1E7E9',
        },
      },
    },
  },
  variants: {
    backgroundColor: [
      'dark',
      'dark-hover',
      'dark-group-hover',
      'dark-even',
      'dark-odd',
    ],
    borderColor: ['dark', 'dark-focus', 'dark-focus-within'],
    textColor: ['dark', 'dark-hover', 'dark-active'],
  },
  plugins: [require('tailwindcss-dark-mode')()],
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
  },
  tailwindcss: {
    // add '~tailwind.config` alias
    exposeConfig: true,
  },
}

CircularProgressIndicator.vue

<template>
  <progress class="cpi" :class="[colorClass]" />
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'

@Component({ name: 'CircularProgressIndicator' })
export default class CircularProgressIndicator extends Vue {
  @Prop({ type: String, default: null }) public color!: string
  @Prop({ type: String, default: null }) public size!: string

  get colorClass(): string | void {
    // if (this.color) return `text-${this.color}-500` // if i specify it like this, the colors applied
    if (this.color) return `text-${this.color}` // but not this one
  }
}
</script>

<style scoped>
.cpi {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  border: none;
  border-radius: 50%;
  padding: 0.25em;
  width: 3em;
  height: 3em;
  background-color: transparent;
  overflow: hidden;
  @apply text-base;
  @apply text-blue-500;
}

.cpi::-webkit-progress-bar {
  background-color: transparent;
}

/* Indeterminate */
.cpi:indeterminate {
  -webkit-mask-image: linear-gradient(transparent 50%, black 50%),
    linear-gradient(to right, transparent 50%, black 50%);
  mask-image: linear-gradient(transparent 50%, black 50%),
    linear-gradient(to right, transparent 50%, black 50%);
  animation: cpi 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
}

.cpi:indeterminate::before,
.cpi:indeterminate::-webkit-progress-value {
  content: '';
  display: block;
  box-sizing: border-box;
  margin-bottom: 0.25em;
  border: solid 0.25em transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  width: 100% !important;
  height: 100%;
  background-color: transparent;
  animation: cpi-pseudo 0.75s infinite linear alternate;
}

.cpi:indeterminate::-moz-progress-bar {
  box-sizing: border-box;
  border: solid 0.25em transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: transparent;
  animation: cpi-pseudo 0.75s infinite linear alternate;
}

.cpi:indeterminate::-ms-fill {
  animation-name: -ms-ring;
}

@keyframes cpi {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(180deg);
    animation-timing-function: linear;
  }
  25% {
    transform: rotate(630deg);
  }
  37.5% {
    transform: rotate(810deg);
    animation-timing-function: linear;
  }
  50% {
    transform: rotate(1260deg);
  }
  62.5% {
    transform: rotate(1440deg);
    animation-timing-function: linear;
  }
  75% {
    transform: rotate(1890deg);
  }
  87.5% {
    transform: rotate(2070deg);
    animation-timing-function: linear;
  }
  100% {
    transform: rotate(2520deg);
  }
}

@keyframes cpi-pseudo {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: currentColor;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: currentColor;
  }
  100% {
    border-left-color: currentColor;
    border-bottom-color: currentColor;
    transform: rotate(225deg);
  }
}
</style>

index.vue

<template>
  <CircularProgressIndicator />
  <CircularProgressIndicator color="green" />
  <CircularProgressIndicator color="red" />
  <CircularProgressIndicator color="teal" />
  <CircularProgressIndicator color="grey" />
</template>

Answer 1

看起来你已经接近了......你应该能够将 if(this.color) 函数扩展到完整的 tst......但目前 if(this.color) 只返回 true 或 false 如果 this .color 存在...你真的不需要比较哪种颜色吗？

if(this.color=='blue' || this.color=='green'){
  return xyz
}