export default function Tag({ index, tag, color = "bg-red-200 text-red-700" }) {\n return (\n \nRun Code Online (Sandbox Code Playgroud)\n\n color有一个Tailwind 类名的字典:\n export default function Tag({ index, tag, color = "red" }) {\n const DICTIONARY = {\n red: \...
创建variable.css文件,代码如下可定义样式变量: :root{--color-G100:#FBFBFB;--color-G150:#F6F6F8;--color-G200:#F0F1F2;--color-G300:#E6E6E8;--color-G400:#D1D2D4;--color-G500:#B3B4B5;--color-G600:#9A9B9C;--color-G700:#7E7E80;--color-G800:#5B5B5C;--color-G900:#2D2D2E;-...
tailwind 中有个样式是text-opacity-10 设置了字体颜色,还可以设置透明度,查看源码发现样式是通过rgba 实现的. .text-gray-900{ --tw-text-opacity:1; color:rgba(17,24,39,var(--tw-text-opacity)); } 1. 2. 3. 4. 如想要支持这个透明度的样式,我们还需要将颜色转成Rgb,tailwi...
如果你们设计同学提供了常用的间距方案,比如4px的倍数或者6px的倍数,现在假设设计同学的设计稿都是750px的,我们就可以基于此来写两个函数方法来处理pxtorem和pxtovw的任务,如果你们是flexable方案就用pxToRem,如果是viewport的适配方案就用pxToVmin。 function pxToRem(variable) { return `${variable / 75}rem` } f...
borderColor: colors, }, plugins: [], } v2和v3版本的设置有些许区别,v2具体的设置什么类别的颜色需要特别指定。 间距& 宽高 & 行高 & 圆角 & 边框宽度 因为tailwindcss默认长度相关的配置是基于rem的,而PC端的项目大多数时候我们都是固定一个宽度,左右留白,所以大多数情况下,设计稿都会在固定一个宽度内,元...
DEFAULTis the variable used to generatebg-primarywithout suffix. Hello ! NOTE :primaryandprimary-500have the same color attributed. It's a better idea to use it without suffix in your code (ex:bg-primary) if the goal is to replace the color globally using its CSS variable. CSS Variables...
.text-color-custom-text-color{--tw-text-opacity:1;color:rgb(var(--color-custom-text-color)/var(--tw-text-opacity)) } 当然工具类的名称是可以自定义的,比如要去除-color-这样的变量前缀,就可以这样配置: createPlugin({entryPoint:'path/to/expose.scss',intelliSense:{// formatter var namegetVar...
最简单的方法是在css文件中给予出自定义类名，并给它light和dark属性。
.text-body\/50 {color:rgb(var(--drupal-red)/0.5); } The same is not working with.proseat all: when compiled, it retains<alpha-value>as literal --tw-prose-body:rgb(var(--drupal-red)/<alpha-value>); Files (partial) style.css ...
最简单的方法是在css文件中给予出自定义类名，并给它light和dark属性。