TwStyleMerge

TwStyleMerge is a Tailwind CSS plugin that simplifies the creation of reusable CSS classes directly in the tailwind.config.js file. By defining multiple properties for your classes, this plugin eliminates the need for @apply directives, streamlining your styling process and enhancing maintainability.

🛠️ Features

• Custom Utility Classes: Define utility classes based on your Tailwind theme.
• Variable Support: Reference existing styles defined in your tailwind.config.js file.
• Custom Prefix: Add a unique prefix to your generated classes.

🚀 Installation

You can install the plugin using one of the following methods:

Using npm

npm install @zure/tw-style-merge

Using Yarn

yarn add @zure/tw-style-merge

Using pnpm

pnpm add @zure/tw-style-merge

⚙️ Configuration

Add the plugin to your tailwind.config.js file and define custom styles under the tw-style-merge theme key:

// tailwind.config.js
const twStyleMerge = require('@zure/tw-style-merge');

module.exports = {
  plugins: [
    twStyleMerge()
  ],
  theme: {
    "tw-style-merge": {
      "heading-1": {
        "fontFamily": "Arial",
        "color": "#000000"
      }
    }
  },
};

Note: This configuration works within theme.extend as well.

Plugin Typing in tailwind.config.js

To add typing support, use the following JSDoc Type Annotation:

/** @type {import('@zure/tw-style-merge').TwStyleMerge} */
const twStyleMerge = require('@zure/tw-style-merge');

module.exports = {
  plugins: [
    twStyleMerge()
  ],
  theme: {
    /** @type {import('@zure/tw-style-merge').TwStyleMergeNode} */
    "tw-style-merge": {
      // ...
    }
  },
};

💡 Usage

Once configured, use the generated classes in your HTML:

<h1 class="heading-1">Main heading</h1>

If you're using Tailwind CSS IntelliSense, IntelliSense will detect and suggest the configured classes seamlessly.

🔧 Advanced Options

Adding a Custom Prefix

To prefix your custom classes, configure the plugin as follows:

// tailwind.config.js
module.exports = {
  plugins: [
    twStyleMerge({ prefix: 'my-prefix' })
  ],
};

Usage:

<h1 class="my-prefix-heading-1">Main heading</h1>

Changing the Configuration Node

Customize the default configuration node (tw-style-merge) by specifying a different name:

// tailwind.config.js
module.exports = {
  plugins: [
    twStyleMerge({ node: 'custom-node-name' })
  ],
  theme: {
    "custom-node-name": {
      "heading-1": {
        "fontFamily": "Arial",
        "color": "#000000"
      }
    }
  }
};

📝 Variables Support

Leverage variables to reuse existing properties from your tailwind.config.js file:

// tailwind.config.js
const twStyleMerge = require('@zure/tw-style-merge');

module.exports = {
  plugins: [
    twStyleMerge()
  ],
  theme: {
    colors: {
      primary: {
        dark: "#0000ff"
      }
    },
    "tw-style-merge": {
      "heading-1": {
        "fontFamily": "Arial",
        "color": "$primary.dark"
      }
    }
  }
};

Variable Mapping

The plugin intelligently maps variables to their respective theme sections. For example:

| Tailwind theme | CSS Property | | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | colors | color | | spacing | width, height, padding, paddingLeft, paddingRight, paddingTop, paddingBottom, margin, marginLeft, marginRight, marginTop, marginBottom, maxWidth, maxHeight, minWidth, minHeight | | gap | gap | | fontFamily | fontFamily | | fontSize | fontSize | | fontWeight | fontWeight | | borderRadius | borderRadius | | boxShadow | boxShadow | | opacity | opacity | | zIndex | zIndex | | lineHeight | lineHeight | | letterSpacing | letterSpacing | | maxWidth | maxWidth | | maxHeight | maxHeight | | minWidth | minWidth | | minHeight | minHeight | | transitionDuration | transitionDuration | | textDecorationColor | textDecorationColor | | textDecorationThickness | textDecorationThickness | | textUnderlineOffset | textUnderlineOffset | | backgroundColor | backgroundColor | | borderColor | borderColor | | borderWidth | borderWidth | | transformOrigin | transformOrigin | | animation | animation | | transitionProperty | transitionProperty | | transitionTimingFunction | transitionTimingFunction | | transitionDelay | transitionDelay |

🤝 Contributing

Contributions are welcome! Feel free to submit issues or pull requests on GitHub.

📜 License

Licensed under the MIT License.

🌟 Thanks

Built with ❤️ for developers who value clean and reusable styles. Powered by Tailwind CSS.