1.0.0 • Published 3 years ago

awesome-windicss v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

PluginDescriptionSupport
tailwind-scrollbarAdds styling utilities for scrollbars in Firefox and webkit-based browsers.require('@windicss/plugin-scrollbar')
tailwindcss-animate.cssAnimate CSS pluginrequire('@windicss/plugin-animations')
tailwindcss-question-markA plugin that provides a helpful ? dev time utility.require('@windicss/plugin-question-mark')
tailwind-heropatternsStreamlined integration between tailwindcss and heropatterns.comrequire('@windicss/plugin-heropatterns')
tailwindcss-interaction-variantsadd some missing interaction state variantsrequire('@windicss/plugin-interaction-variants')
tailwindcss-hero-patternsA simple tailwind plugin to display Hero Patternstransform('tailwindcss-hero-patterns')
tailwindcss-fluidFluid utilities for Tailwind CSStransform('tailwindcss-fluid')
tailwindcss-truncate-multilineTailwind CSS plugin to generate truncate multiline utilitiestransform('tailwindcss-truncate-multiline')
tailwindcss-blend-modeBlend-mode utilities for Tailwind CSS.transform('tailwindcss-blend-mode')
tailwind-color-varsTailwind plugin to generate css vars '--color-name' for colors list.transform('tailwind-color-vars')
tailwindcss-triangle-afterTailwind plugin to generate css vars '--color-name' for colors list.transform('tailwindcss-triangle-after')
tailwindcss-gradientsgenerate gradient background utilitiestransform('tailwindcss-gradients')
tailwind-nordenables the use of the Nord color palette.transform('tailwind-nord')
tailwindcss-border-gradientsgenerate border image gradient utilities.transform('tailwindcss-border-gradients')
tailwindcss-elevationAdd Material Components elevation classestransform('tailwindcss-elevation')
tailwind-bootstrap-gridgenerates Bootstrap's flexbox gridtransform('tailwind-bootstrap-grid')