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')