Plugins

Windi CSS provides official plugins which you can add in your configuration file.

They are similar to the ones from Tailwind CSS, but adapted to the interface of Windi CSS to add improvements like auto-inferred utilities.

Typography

Utilities

ClassBody font size
prose-sm0.875rem (14px)
prose1rem (16px)
prose-lg1.125rem (18px)
prose-xl1.25rem (20px)
prose-2xl1.5rem (24px)
ClassLink color
prose-redred.600
prose-yellowyellow.600
prose-greengreen.600
prose-blueblue.600
prose-indigoindigo.600
prose-purplepurple.600
prose-pinkpink.600

Basic Usage

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('windicss/plugin/typography'),
    // ...
  ],
}

Disabling size modifiers

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('windicss/plugin/typography')({
      modifiers: ['sm', 'lg'],
    }),
    // ...
  ],
}

Customization

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      }
    },
  },
  plugins: [
    require('windicss/plugin/typography'),
    // ...
  ],
}

Forms

Base Styles

  • input[type='text']
  • input[type='password']
  • input[type='email']
  • input[type='number']
  • input[type='url']
  • input[type='date']
  • input[type='datetime-local']
  • input[type='month']
  • input[type='week']
  • input[type='time']
  • input[type='search']
  • input[type='tel']
  • input[type='checkbox']
  • input[type='radio']
  • select
  • select[multiple]
  • textarea

Usage

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('windicss/plugin/forms'),
    // ...
  ],
}

Aspect Ratio

Utilities

ClassProperties
aspect-noneposition: 'static';
paddingBottom: '0';
'> *': {
 position: 'static';
 height: 'auto';
 width: 'auto';
 top: 'auto';
 right: 'auto';
 bottom: 'auto';
 left: 'auto';
}
aspect-w-${float}--tw-aspect-w: ${float};
aspect-h-${float}--tw-aspect-h: ${float};
aspect-${fraction}position: 'relative';
paddingBottom: ${percent};
'> *': {
 position: 'absolute';
 height: '100%';
 width: '100%';
 top: '0';
 right: '0';
 bottom: '0';
 left: '0';
}

aspect-w-${float} will add the following base styles:

.aspect-w-${float} {
  position: 'relative';
  padding-bottom: 'calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%)';
}

.aspect-w-${float} > * {
  position: 'absolute';
  height: '100%';
  width: '100%';
  top: '0';
  right: '0';
  bottom: '0';
  left: '0';
}

Usage

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('windicss/plugin/aspect-ratio'),
    // ...
  ],
}

Line Clamp

Utilities

ClassProperties
line-clamp-${int}overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: ${int};
line-clamp-none-webkit-line-clamp: unset;

Usage

// tailwind.config.js
module.exports = {
  extend: {
    lineClamp: {
      sm: '3',
      lg: '10',
    }
  },
  plugins: [
    require('windicss/plugin/line-clamp'),
    // ...
  ],
}

Filters

Utilities

ClassProperties
filter-${key}filter: ${value};
backdrop-${key}backdrop-filter: ${value};

Usage

// tailwind.config.js
module.exports = {
  theme: {
    filter: {
      'none': 'none',
      'grayscale': 'grayscale(1)',
      'invert': 'invert(1)',
      'sepia': 'sepia(1)',
    },
    backdropFilter: {
      'none': 'none',
      'blur': 'blur(20px)',
    },
  },
  variants: {
    filter: ['responsive'],
    backdropFilter: ['responsive'],
  },
  plugins: [
    require('windicss/plugin/filters'),
  ],
};

Scroll Snap

inspired by tailwindcss-scroll-snap

Utilities

ClassPropertiesDescription
snapscroll-snap-type:
var(--scroll-snap-axis, both)
var(--scroll-snap-strictness, mandatory)
main snap class
Strictness
snap-none--scroll-snap-strictness: none
snap-mandatory--scroll-snap-strictness: mandatory
snap-proximity--scroll-snap-strictness: proximity
Axis
snap-x--scroll-snap-axis: x
snap-y--scroll-snap-axis: y
snap-block--scroll-snap-axis: block
snap-inline--scroll-snap-axis: inline
snap-both--scroll-snap-axis: both
Align
snap-startscroll-snap-align: start
snap-endscroll-snap-align: end
snap-centerscroll-snap-align: center
Stop
snap-normalscroll-snap-stop: normal
snap-alwaysscroll-snap-stop: always
Margin
snap-m${direction}-${value}scroll-snap-margin${direction}: ${value}same Margin Utilities
Padding
snap-p${direction}-${value}scroll-snap-padding${direction}: ${value}same Padding Utilities
Other
scrollbar-hidescrollbar-width: none
::-webkit-scrollbar: {
  display: none
}
visual hide scrollbar

Usage

// tailwind.config.js
module.exports = {
  plugins: [
    require('windicss/plugin/scroll-snap'),
    // ...
  ],
}

with TypeScript:

// tailwind.config.ts
import scrollSnapPlugin from 'windicss/plugin/scroll-snap'

export default defineConfig({
  plugins: [
    scrollSnapPlugin,
    // ...
  ],
})