tailwindcss_cssvariable_fallback

给tailwindcss中某些颜色属性添加降级选项。

安装

从npm上安装这个插件:

npm install -D tailwincss_cssvariable_fallback

然后添加这个插件到你的tailwind.config.js文件中

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

用法

前提目前不支持JIT模式下的降级。因此你要使用某些颜色属性，同时希望触发降级特性，请在tailwind.config.js的theme中的colors属性中为它指定一个唯一的颜色名。例如:

// tailwind.config.js

module.exports = {
  theme: {
    colors: {
      primary: '#04cb94',
    }
  }
}

现在如果你使用bg-primary为某个元素赋予背景颜色为primary会触发此插件，于是在生成的属性中你会看到

.bg-primary {
  background-color: '#04cb94'
}

注意目前仅支持bg-*, text-*, border-*等属性, 对于text-red-200/[0.2]带透明度的写法，在tailwindcss v3中存在兼容问题，v3中这种写法会生成rbg() with alpha的css属性。例如: text-red-200/20会生成color: rgb(254 202 202 / 0.2)。这种写法IE是不兼容的，请考虑添加postcss-color-rgb插件到你的postcss配置中

新特性

目前支持content指令，为伪元素添加content: " "属性。你可以在任何使用after或者before的场景下使用content。以获得兼容IE的写法。

<div class="after:conten">Demo</div>

将会生成

.after\:content::after {
  content:" ";
}