tailwind-class-parser v1.3.4

Tailwind Class Parser

Programmatically managing tailwind classes

Main purpose

This package was created in order to programmatically manage the Tailwind classes and unload the template from a large set of classes.

Why did I decide to do this?

• I work with a pug and when I first encountered a fractional number in Tailwind class, it caused problems.
• Sometimes I need to use a large number of classes to achieve the desired result. Mixing hover, focus, and responsive caused great difficulties in reading and supporting
• The main reason I took up this package was the difficulty in reactively using classes

I work with Vue, and when I needed to change a set of classes at a certain state of the component, I realized that this is very inconvenient. Then I decided to use the computed property to solve this, but even then I will return to past problems that prevented me from conveniently reading and maintaining the element classes. I have no experience with React or Angular, but I am sure that if you use this package in these frameworks, you will get the same result

How does this package work?

All you have to do is import this package into your project and refer to it. The function must accept an object, each parameter of which is a list of the necessary Tailwind classes in the form of a string:

const tw = twConstruct({
  header: 'fixed inset-x top-0 border-b border-gray-400 bg-white',
  body: 'container min-h-screen mx-auto space-x-5',
})

You can extend this. Each property can be an object that has base - base styles that are not processed in any way. In addition to base, you can also use the entire state set of tailwind classes: hover:, focus:, sm:, md... etc:

const tw = twConstruct({
  header: 'fixed inset-x top-0 border-b border-gray-400 bg-white',
  body: {
    base: 'container min-h-screen mx-auto space-x-5',
    sm: 'space-y-5 bg-gray-50'
  }
})

After processing the object with the function, you will get the following object. Note that the sm: marker was added to all classes from the sm property string. This will also work with the rest of the Tailwind state:

{
  header: 'fixed inset-x top-0 border-b border-gray-400 bg-white',
  body: 'container min-h-screen mx-auto space-x-5 sm:space-y-5 sm:bg-gray-50'
}

The properties of the received object can also be a function that should return something:

const count = 9

const tw = twConstruct({
  header: 'fixed inset-x top-0 border-b border-gray-400 bg-white',
  body: {
    base: 'container min-h-screen mx-auto space-x-5',
    sm: 'space-y-5'
  },
  aside: () => {
    const base = 'flex'
    const state = {
      done: 'bg-green-200',
      cancelled: 'bg-reg-100'
    }
    return `${base} ${count >= 10 ? state.done : state.cancelled}`
  }
})

In addition to all of the above, the properties of a nested object can also be a function:

const alertState = 'danger'
const count = 9

const tw = twConstruct({
  alert: {
    base: () => {
      const base = 'border-l-4'
      const state = {
        primery: 'border-green-400',
        warning: 'border-yellow-500',
        danger: 'border-yellow-500'
      }
      return `${base} ${state[alertStatus]}`
    },
    hover: () => {
      const state = {
        primery: 'bg-green-50',
        warning: 'bg-yellow-50',
        danger: 'bg-yellow-50'
      }
      return state[alertStatus]
    }
  },
  header: 'fixed inset-x top-0 border-b border-gray-400 bg-white',
  body: {
    base: 'container min-h-screen mx-auto space-x-5',
    sm: 'space-y-5'
  }
})

During processing, the function and functions nested in the properties will be executed, and their results will be processed and returned:

console.log(tw.alert) // 'border-l-4 border-yellow-500 hover:bg-yellow-50'

You can also use the custom property to embed a custom class. After processing, this will return __CUSTOM__yourClassName. This eliminates possible errors due to the layering of class properties. This will be especially useful if you use SCSS in your project:

__CUSTOM__ {

  &className {
    // ...
  }

}

What problems are solved with this package?

1. The purity and maintainability of your template
2. Minimum logic in the template. All you have to do is refer to the object and its property:

<template lang="pug">
 
.container
  div(:class="tw.card")
 
//- end line
</template>

3. A convenient solution for the use of reactivity:

const linkState = ref('primary')
const tw = computed(() => twConstruct({
  hover: '. . .',
  link: () => {
    const base = '. . .'
    const state = {
      primery: '. . .',
      danger: '. . .'
    }
    return `${base} ${state[linkState]}`
  }
}))

I will be happy to receive your feedback. If you have any suggestions or ideas on how to make it better, then I will be happy to receive them!