从 v2.2 到 v2.4

两周后，我们发布了两个版本的更新，然后我们突破了 一千个 star，感谢你们对 windicss 的喜爱。在此期间发布了许多新特性，并修复了一些 bug。以下是一些总结。

特性

支持主题函数

在 css 中获取配置项的值

/* input */
.btn-blue {
  background-color: theme('colors.blue.500');
}
/* output */
.btn-blue {
  background-color: #3b82f6;
}

支持 layer 指令

把样式放在正确的位置

/* input */
@layer components {
  .components {
    @apply bg-red-500;
  }
}
@layer utilities {
  .utilities {
    max-width: 768px;
  }
}
@layer base {
  base {
    margin-left: auto;
  }
}
.normal {
  margin-right: auto; /* 默认情况下的组件 */
}

/* output */
base {
  margin-left: auto;
}
.components {
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
}
.normal {
  margin-right: auto;
}
.utilities {
  max-width: 768px;
}

Transform api

用 transform 替换 require，让你可以导入 tailwind 插件。更多信息，请参阅 windicss/plugins

// windi.config.js
const { transform } = require('windicss/helpers')

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    transform('plugin-name'), // 用 transform 替换 require
  ],
}

支持禁用跨浏览器的前缀

你可以设置 prefixer = false 来禁用前缀

// windi.config.js
module.exports = {
  prefixer: false,
  theme: {
    // ...
  },
}

支持嵌套的 css

这实际上有点像 less 或 postcss 语法。

/* input */
#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
}
/* output */
#bundle .button {
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#bundle .button:hover {
  background-color: white;
}

新的元排序方法
我们引入了一种新的排序算法，根据元信息进行排序，这使我们能够准确地控制所生成的每个工具类的位置，并确保所生成的 css 的准确性。

支持使用关键字 hexa，hsl，hsla，hwb，srgb 等来定义颜色。

现在你可以在配置文件中使用这些颜色类型，windi 会将它们转换为 rgb。

// windi.config.js
module.exports = {
  theme: {
    colors: {
      name: 'blue',
      hex: '#1c1c1e',
      hexa: '#0000ff00',
      rgb: 'rgb(23, 23, 24)',
      rgba: 'rgba(23, 23, 25, 0.5)',
      hsl: 'hsl(120, 100%, 50%)',
      hsla: 'hsla(120, 100%, 75%, 0.3)',
      hwb: 'hwb(280, 40%, 60%)',
      hwba: 'hwb(280, 40%, 60%, 0)',
      srgb: 'rgb(69.99%, 32%, 32%)',
    },
  },
}

新闻

新域名，https://windicss.org/，感谢 @antfu
VSCode 扩展，https://github.com/windicss/windicss-intellisense
Webpack 插件，https://github.com/windicss/windicss-webpack-plugin，感谢 @harlan-zw
Nuxt 插件，https://github.com/windicss/nuxt-windicss-module，感谢 @harlan-zw
社区插件支持，https://github.com/windicss/plugins

从 v2.2 到 v2.4 #

特性 #

新闻 #

从 v2.2 到 v2.4

特性

新闻