TA-Styled-Plugins
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.
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.
# 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// 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"),
],
// ...
};
<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>You can find more about the Tailwind CSS helper plugin in the documentation on NPM and GitHub.
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.
# 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// 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
}),
]
// ...
};
<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>You can find more about the Tailwind CSS Multi Column plugin in the documentation on NPM and GitHub.
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.
# Install using npm
npm install --save-dev @markusantonwolf/tailwind-css-plugin-filters
# Install using yarn
yarn add -D @markusantonwolf/tailwind-css-plugin-filters// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@markusantonwolf/tailwind-css-plugin-multi-columns')({
variants: ["responsive"],
utilities: ["drop-shadow", "blur", "backdrop-blur", "bg-blur"],
}),
]
// ...
};
<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>You can find more about the Tailwind CSS Filter utilities plugin in the documentation on NPM and GitHub.
TA Styled Plugins are licensed under the MIT license, see LICENSE for details.
Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com