Skip to content

Latest commit

 

History

History
63 lines (50 loc) · 4.15 KB

README.md

File metadata and controls

63 lines (50 loc) · 4.15 KB

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