New Features In v3.1

This is a summary version that summarizes the improvements and added features from v3.0.6 to v3.1.0.

Features

New opacity handler syntax

Color and transparency are usually a common combination. We used to have text-green-500 text-opacity-50. Now you can use the following abbreviations.

text-green-500/50
underline-green-500/50
placeholder-green-500/50
bg-indigo-500/$primary-opacity
bg-green-500/[0.17]
...

New border side color and border side opacity

The new border side color utilities allow you to set different border-color for different sides

border-t-green-200
border-t-green-200/50
border-b-green-200
border-l-yellow-300
border-r-blue-400

New content utility

The content utilities generate the corresponding content css, such as content: '', which can be very helpful in many cases.

content-👍
before:content-["👍"]
content-open-quote
after:content-[attr(value)]
content

Add more gradient color defaults

Creating gradient colors has always been a hassle, and you can't be sure that the resulting gradient color will look good. So we've added more gradient color defaults to make it easier for users to use. The gradient colors from coolhue.

bg-gradient-1
bg-gradient-2
...
bg-gradient-60

New animation utilities

The previous animation utilities had no interactivity at all, so we added a new set of animations (thanks to the hard work of animate.css) and added the corresponding operation utilities.

Animations

animate-none
animate-spin
animate-ping
animate-pulse
animate-bounce
animate-shock
animate-flash
animate-bubble
animate-rubber-band
animate-shake-x
animate-shake-y
...for more, please refer to https://github.com/windicss/windicss/blob/main/src/config/base.ts#L92-L209

Animation Trigger

animated

You need to use animated to trigger the animation(animated animate-flash), just like you do with filter blur-sm. If you need the animation to play infinite, you also need to use an animate-loop. This for getting better customizability. Most of the time we probably need just trigger it once, not a loop.

animate-spin animate-ping animate-pulse animate-bounce are special cases, you can trigger them without using animated and they will loop at the same time. Since these are previously existing utilities, suddenly modifying them may cause a lot of trouble for users. You can understand how they work through the configuration file.

export default {
  animation: {
    'spin': 'spin 1s linear infinite',
    'ping': 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
    'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
    'bounce': 'bounce 1s infinite',
    'shock': {
      animation: 'shock',
      transformOrigin: 'center bottom',
    },
    'flash': 'flash',
    'bubble': 'bubble',
    'rubber-band': 'rubberBand',
    'shake-x': 'shakeX',
    // ...
  },
}

Animation Delay

The animation-delay utility specifies a delay for the start of an animation.

animate-delay-100
animate-delay-1500
animate-delay-[1s]
animate-delay-$time-delay
animate-delay-1.5s
animate-delay-200ms

Animation Direction

The animation-direction utility defines whether an animation should be played forwards, backward or in alternate cycles.

animate-reverse
animate-alternate
animate-alternate-reverse

Animation Duration

The animation-duration utility defines how long an animation should take to complete one cycle.

animate-duration-100
animate-duration-1500
animate-duration-1.5s
animate-duration-[1.3s]
animate-duration-$time-duration

Animation Fill Mode

The animation-fill-mode utility specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

animate-fill-none
animate-fill-forwards
animate-fill-backwards
animate-fill-both

Animation Iteration Count

The animation-iteration-count utility specifies the number of times an animation should be played.

animate-loop
animate-repeat-1
animate-repeat-12
animate-repeat-[23]

Animation Play State

The animation-play-state utility specifies whether the animation is running or paused.

animate-paused
animate-running

Animate Timing Function

The animation-timing-function specifies the speed curve of an animation.

animate-ease
animate-ease-in
animate-ease-linear
animate-ease-out
animate-ease-in-out
animate-ease-[cubic-bezier(0.25,0.1,0.25,1)]

New time handler

We also added a new time handler, which allows you to use the corresponding time, like s and ms, directly in the className. duration-{time} delay-{time} animate-duration-{time} animate-delay-{time}.

  <div class="duration-1.5s delay-200ms animate-duration-1.3s">...</div>

You can control its switch by configuring handlers.time

windi.config.js

export default {
  theme: {
    // ...
  },
  handlers: {
    static: true,
    time: false,
  },
}

Dark mode support for Typography

We added a nice dark mode for the typography plugin, you can enable the feature via the dark configuration, which will add the corresponding dark mode css based on your darkMode configuration.

import typography from 'windicss/plugin/typography'
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  darkMode: 'class',
  plugins: [
    typography({
      dark: true,
    }),
  ],
})

Rtl support for Typography

Previously, typography did not support rtl very well, we solved this problem.

import typography from 'windicss/plugin/typography'
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  plugins: [
    typography({
      rtl: true,
    }),
  ],
})

Icon Library for Windi

Added an icon library for windicss, powered by css.gg.

npm install --save-dev @windicss/plugin-icons

Let's simply create a close button or menu. It is completely pure css and is generated on demand.

<div class="bg-gray-200 text-gray-800 hover:bg-gray-300 rounded-full w-8 h-8 flex items-center justify-center">
  <i class="icon-close"></i>
</div>

<div class="bg-gray-200 text-gray-800 hover:bg-gray-300 rounded w-12 h-12 flex items-center justify-center">
  <i class="icon-menu"></i>
</div>

More Improvements

better square brackets support
support include and exclude option in config file
support attributify prefix
support safelist in cli
support watch config file in cli

API

New API for checking if a utility is a windi utility

Processor.test('bg-red-500') // -> boolean
Processor.validate('font-bold text-green-300 sm:dark:hover:text-lg') // -> boolean

Support add completion in `addDynamic` API

addDynamic('line-clamp', ({ Utility, Property, Style }) => {
  // ...
}, {
  group: 'lineClamp',
  completions: [
    'line-clamp-none',
    'line-clamp-{int}',
  ],
})

New Features In v3.1 #

Features #

New opacity handler syntax #

New border side color and border side opacity #

New content utility #

Add more gradient color defaults #

New animation utilities #

Animations #

Animation Trigger #

Animation Delay #

Animation Direction #

Animation Duration #

Animation Fill Mode #

Animation Iteration Count #

Animation Play State #

Animate Timing Function #

New time handler #

Dark mode support for Typography #

Rtl support for Typography #

Icon Library for Windi #

More Improvements #

API #

New API for checking if a utility is a windi utility #

Support add completion in addDynamic API #