Tailwind Plugin to create CSS classes

[nanorepublica]

Hi all,

Shared this on the Tailwind Discord a while back, but figure a shoutout here would be good as well.

NPM: https://www.npmjs.com/package/tailwind-component-classes
Repo: https://github.com/softwarecrafts/tailwind-component-classes

This plugin allows the declarative creation of CSS classes in your tailwind.config.js. This is identical to using the @apply syntax in a CSS file but with the added benefits of the config file syntax, most notably the use of presets & the extend keyword.

I have also added an underscore _ key which declares a base set of classes which then gets merged into each sibling class declaration as well as forming the base class (see the example below)

An example:

This config:

components: {
    btn: {
        _: "border-blue-400"
        primary: "bg-blue-400",
        secondary: "bg-green-400"
        error: "bg-red-400"
    },
    heading: {
        1: "text-4xl"
        2: "text-3xl"
    }
}

would be the equivalent to declaring this in a css file using the @apply rule:

.btn {
    @apply border-blue-400;
}
.btn-primary {
    @apply border-blue-400 bg-blue-400;
}
.btn-secondary {
    @apply border-blue-400 bg-green-400;
}
.btn-error {
    @apply border-blue-400 bg-red-400;
}
.heading-1 {
    @apply text-4xl;
}
.heading-2 {
    @apply text-3xl;
}

A preset example:

base.config.js

  components: {
    btn: {
      _: "shadow text-blue-900 border border-blue-400 px-4 py-2",
      error: "text-red-900 border-red-500",
    },
    heading: {
      _: "font-bold",
      1: "text-4xl",
      2: "text-3xl",
    },
  }

project.config.js

  components: {
   // extends the base btn config
    extend: {
      btn: {
        success: "bg-green-400 text-gray-900 border-green-700",
        // creates btn-heading class using classes defined below in the heading section
        heading: "heading-1",
      },
    },
    // overwrites the heading classes with our own.
    heading: {
      _: "font-light",
      1: "text-7xl",
      2: "text-6xl",
    },
  },

I am very open to feedback. Hopefully this will help with design system creation and migrating existing projects to Tailwind!