Network Pipe Manufacturer

    This package has been deprecated

    Author message:

    error upload


    1.0.0 • Public • Published

    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: [

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




    npm i awesome-windicss

    DownloadsWeekly Downloads






    Unpacked Size

    801 kB

    Total Files


    Last publish


    • npm
    • voorjaar