TA-Styled-Plugins - Helper Plugins for Tailwind CSS

Every TA-Styled-Plugin comes as an installable package from npm and provides an easy to install Tailwind CSS plugin.

In addition to these plugins I have written some helper plugins for Tailwind CSS you should check out too. All helper plugins came about because I needed the functionality for a project and all are used for this documentation website too.

Custom color palette

This Tailwind CSS helper plugin generates a color palette and all utilities based on your custom colors.

It generates new utilities like text-colorname-100 or bg-colorname-600. Every starting color you define will be used as -500 variante in the palette. You can use it as a replacement for the predefined Tailwind CSS colors or as complement to your color palette.

Installation

# Install using npm

npm install --save-dev @markusantonwolf/tailwind-css-plugin-custom-color-palette

# Install using yarn

yarn add -D @markusantonwolf/tailwind-css-plugin-custom-color-palette

How to use

// tailwind.config.js
module.exports = {
    // ...
    theme: {
        customColorPalette: {
            colors: {
                favorite: "#408075", // add more colors to the plugin
            },
        },
        // ...
        extend: {
            // ...
        },
    }
    // ...
    plugins: [
        require("@markusantonwolf/tailwind-css-plugin-custom-color-palette"),
    ],
    // ...
};

Examples

<div class="border border-favorite-200 bg-favorite-100">
    <!-- Content -->
</div>

<div class="text-xl font-bold text-favorite-800 hover:text-favorite-900">
    <!-- Content -->
</div>
Use this helper plugin to reduce the build time and adapt the color palette to your designs.

You can find more about the Tailwind CSS helper plugin in the documentation on NPM and GitHub.

Multi columns

This helper plugin generates utilities for multi-column paragraphs - think about a magazine style on your page.

The Tailwind CSS Multi Column plugin generates new utilities .column and .rule in the same way .border and .gap utilities are defined in Tailwind CSS. You can add more utilities by changing the configuration.

Installation

# Install using npm

npm install --save-dev @markusantonwolf/tailwind-css-plugin-multi-columns

# Install using yarn

yarn add -D @markusantonwolf/tailwind-css-plugin-multi-columns

How to use

// tailwind.config.js
module.exports = {
    // ...
    plugins: [
        require('@markusantonwolf/tailwind-css-plugin-multi-columns')({
            variants: ["responsive"], // replaces definitions
            styles: ["dotted", "solid", "dashed"], // replaces definitions
            columns: ["2", "3", "4", "5", "6", "7", "8", "9"], // replaces definitions
            span: [], // merges definitions
            gaps: [], // merges definitions
            spacing: [], // merges definitions
            colors: [], // merges definitions
            borderWidth: [], // merges definitions
            opacity: [], // merges definitions
        }),
    ]
    // ...
};

Examples

<div class="column-2 column-gap-12 rule rule-dashed rule-gray-500">
    <!-- Content -->
</div>

<div class="md:column-2 xl:column-3 2xl:column-4 column-gap-12 xl:rule-2 rule-dotted rule-gray-300">
    <!-- Content -->
</div>

<div class="sm:column-2 xl:column-3 sm:column-gap-12 xl:column-gap-24 rule xl:rule-2 rule-dashed rule-gray-900 rule-opacity-50">
    <!-- Content -->
</div>
CSS Multi-column layout made easy in Tailwind CSS

You can find more about the Tailwind CSS Multi Column plugin in the documentation on NPM and GitHub.

CSS filters

This plugin adds some CSS filter utilities to your toolset. All colors defined in your configuration are used to generate the new utilities.

This Tailwind CSS Plugin Filter utilities generates new utilities like bg-blur-5, drop-shadow and drop-shadow-gray-100. It is an easy way to make background blur or drop shadow easily usable in Tailwind CSS without defining your own styles.

Installation

# Install using npm

npm install --save-dev @markusantonwolf/tailwind-css-plugin-filters

# Install using yarn

yarn add -D @markusantonwolf/tailwind-css-plugin-filters

How to use

// tailwind.config.js
module.exports = {
    // ...
    plugins: [
        require('@markusantonwolf/tailwind-css-plugin-multi-columns')({
            variants: ["responsive"],
            utilities: ["drop-shadow", "blur", "backdrop-blur", "bg-blur"],
        }),
    ]
    // ...
};

Examples

<div class="drop-shadow drop-shadow-xl drop-shadow-gray-100">
    <!-- Content -->
</div>

<div class="bg-blur-5">
    <!-- Content -->
</div>

<div class="blur-5">
    <!-- Content -->
</div>
CSS filter utilities like drop shadow & background blur

You can find more about the Tailwind CSS Filter utilities plugin in the documentation on NPM and GitHub.

TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy