logo

Writing purgeable HTML

Writing purgeable HTML

Since this relates to TailwindCSS read more here:

TailwindCSS - Optimizing for production TailwindCSS - Writing purgeable HTML

Vue components

This is a list how you can declare dynamic classes in vue components which are purgeable for TailwindCSS.

This list is pretty old this could already be outdated 
OK
through = 'through'
 :class="[
      through && `line-through`
  ]"

OK
through = 'line-through'
 :class="[
      through
  ]"

XX
through = ''
 :class="[
      through && `line-${through}`
  ]"

XX
through = 'through'
 :class="[
      through && `line-${through}`
  ]"

X
through = 'through'
 :class="[
        `line-${through}`
  ]"


computed

X
:class="[getColor, getVariant]
getVariant() {
      return [`text-${this.variant}`, `line-${this.through}`]
    },


OK
through="line-through"
default="line-through"
getVariant() {
      return [`text-${this.variant}`, this.through]
    },

OK
through="line-through"
default=''
getVariant() {
      return [`text-${this.variant}`, this.through]
    },

Read more:

Vue Coding Guidelines Prepare & Optimize for production