如何获得@apply在TailwindCSS中工作？

Question

我似乎无法让TailwindCSS @apply工作。 VSCode不会协调代码。

<template>
  <div>
    <v-checkbox label="Indoor" v-model="clone.indoor" @change="onChange"/>
    <v-checkbox label="Outdoor" v-model="clone.outdoor" @change="onChange"/>
  </div>
</template>

<script>
  export default {
    name: 'OptionsInput',

    props: {
      value: Object, // has indoor, outdoor properties
    },

    data () {
       return {
          clone: Object.assign({}, this.value)
       }
    },

    methods: {
      onChange() { this.$emit('input', this.clone) }
    }
  }
</script>

Answer 1

没有在apply命令'中定义的顺风类名称。您不需要放它。

作为解决方案，将所有顺风元素都写在一行中。

.btn {
  @apply mb-2 bg-purple-600 text-gray-100 font-bold p-3 rounded;
}

Answer 2

您缺少点。这样做：

.btn {
  @apply .mb-2 .bg-purple-600 .text-gray-100 .font-bold .p-3 .rounded;
}

希望对您有帮助。