awesome-windicss
v1.0.0Windi CSS Plugins
Collection of plugins for Windi CSS.
If you find some plugin that you used is not yet supported, you are welcome to post an issue or pull request, and we will support it soon. Anyone can upload a pr to this project and pass in their own plugin. The package naming should conform to
@windicss/plugin-xxx
.
Transform API
For tailwind plugins, we generally use Transform API to support them. You can import them to your config like below:
// windi.config.js
const { transform } = require('windicss/helpers');
module.exports = {
theme: {
...
},
plugins: [
transform('plugin-name'), // replace require with transform
]
}
Sub Module
However windicss abandoned postcss for some benefits, and we will also lose support for the postcss interface. Therefore, for this type of plugin, we will simpily fork the code, make some modification, and republish it as a submodule of @windicss/...
.
// windi.config.js
module.exports = {
theme: {
...
},
plugins: [
require('@windicss/plugin-name'),
]
}
Plugin List
Plugin | Description | Support |
---|---|---|
tailwind-scrollbar | Adds styling utilities for scrollbars in Firefox and webkit-based browsers. | require('@windicss/plugin-scrollbar') |
tailwindcss-animate.css | Animate CSS plugin | require('@windicss/plugin-animations') |
tailwindcss-question-mark | A plugin that provides a helpful ? dev time utility. | require('@windicss/plugin-question-mark') |
tailwind-heropatterns | Streamlined integration between tailwindcss and heropatterns.com | require('@windicss/plugin-heropatterns') |
tailwindcss-interaction-variants | add some missing interaction state variants | require('@windicss/plugin-interaction-variants') |
tailwindcss-hero-patterns | A simple tailwind plugin to display Hero Patterns | transform('tailwindcss-hero-patterns') |
tailwindcss-fluid | Fluid utilities for Tailwind CSS | transform('tailwindcss-fluid') |
tailwindcss-truncate-multiline | Tailwind CSS plugin to generate truncate multiline utilities | transform('tailwindcss-truncate-multiline') |
tailwindcss-blend-mode | Blend-mode utilities for Tailwind CSS. | transform('tailwindcss-blend-mode') |
tailwind-color-vars | Tailwind plugin to generate css vars '--color-name' for colors list. | transform('tailwind-color-vars') |
tailwindcss-triangle-after | Tailwind plugin to generate css vars '--color-name' for colors list. | transform('tailwindcss-triangle-after') |
tailwindcss-gradients | generate gradient background utilities | transform('tailwindcss-gradients') |
tailwind-nord | enables the use of the Nord color palette. | transform('tailwind-nord') |
tailwindcss-border-gradients | generate border image gradient utilities. | transform('tailwindcss-border-gradients') |
tailwindcss-elevation | Add Material Components elevation classes | transform('tailwindcss-elevation') |
tailwind-bootstrap-grid | generates Bootstrap's flexbox grid | transform('tailwind-bootstrap-grid') |