Windi 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 |
|---|---|---|
| icons | Generate on-demands icon library for windicss. | require('@windicss/plugin-icons') |
| animations | Animate CSS plugin | require('@windicss/plugin-animations') |
| scrollbar | Adds styling utilities for scrollbars in Firefox and webkit-based browsers. | require('@windicss/plugin-scrollbar') |
| question-mark | A plugin that provides a helpful ? dev time utility. | require('@windicss/plugin-question-mark') |
| heropatterns | Streamlined integration between windicss and heropatterns.com | require('@windicss/plugin-heropatterns') |
| interaction-variants | Add some missing interaction state variants | require('@windicss/plugin-interaction-variants') |
| hero-patterns | A simple plugin to display Hero Patterns | transform('tailwindcss-hero-patterns') |
| fluid | Fluid utilities for Tailwind CSS | transform('tailwindcss-fluid') |
| truncate-multiline | Generate truncate multiline utilities | transform('tailwindcss-truncate-multiline') |
| blend-mode | Blend-mode utilities for Tailwind CSS. | transform('tailwindcss-blend-mode') |
| color-vars | Generate css vars '--color-name' for colors list. | transform('tailwind-color-vars') |
| triangle-after | Generate styles for CSS based triangles. | transform('tailwindcss-triangle-after') |
| gradients | Generate gradient background utilities | transform('tailwindcss-gradients') |
| nord | Enables the use of the Nord color palette. | transform('tailwind-nord') |
| border-gradients | Generate border image gradient utilities. | transform('tailwindcss-border-gradients') |
| elevation | Add Material Components elevation classes | transform('tailwindcss-elevation') |
| bootstrap-grid | Generates Bootstrap's flexbox grid | transform('tailwind-bootstrap-grid') |