tailwind css 可以让用户在tailwind.config.js中配置一些自定义颜色,这样css 中就增加了与之对应颜色的class。 constcolors =require('tailwindcss/colors')module.exports= {mode:'jit',theme: {extend: {colors: {amber: colors.amber,lime: colors.lime,rose: colors.rose,orange: colors.orange, }, },back...
此外,您还可以使用此技巧做其他事情,例如响应式 CSS(如下,以 Svelte 方式): $: changingHue = 0 setInterval(() => changing_hue++, 250) $: cssVariables = { 'primary-color': `hsl(${changingHue} 100% 70%)`, 'secondary-color': "#000" } $: styleValues = Object.entries(cssVariables)...
使用CSS variables 是实现换肤最方便的方案,按传统的方案就得加入一些css class 就可以实现,如: :root{ --page-bg:#fff; --card-bg:#F9FAFB;/* gray-50 */ --title-color:#111827;/* gray-900 */ --desc-color:#4B5563;/* gray-600 */ } .theme-dark{ --page-bg:#111827;/* gray-900 *...
作为Tailwindcss Plugin来使用 在tailwind.config.js中引入,并添加配置: const{createPlugin}=require('tailwind-css-variables-theme-generator')/**@type{import('tailwindcss').Config} */module.exports={// ...plugins:[createPlugin({// 推荐使用绝对路径,相对路径基于 process.cwd ,一旦 cwd 路径不对插件...
一个使用 Tailwind 与常见的 CSS 预处理器,如 Sass,Less 和 Stylus 的指南 由于Tailwind 是一个 PostCSS 插件,没有什么可以阻止您使用 Sass,Less,Stylus 或其他预处理器,就像您可以使用其他 PostCSS 插件,如Autoprefixer。 重要的是要注意,您不需要在Tailwind中使用预处理器—您通常在 Tailwind 项目中写很少的 CS...
CSS variables 使用CSS variables 是实现换肤最方便的方案,按传统的方案就得加入一些 css class 就可以实现,如: 代码语言:javascript 复制 :root{--page-bg:#fff;--card-bg:#f9fafb;/* gray-50 */--title-color:#111827;/* gray-900 */--desc-color:#4b5563;/* gray-600 */}.theme-dark{--page...
tailwind-css-variables-theme-generator 一种基于tailwindcss的just-in-time模式的动态多主题色快速生成,和管理方案。 特性 可作为tailwindcss插件运行,tailwindcssIDE 智能提示插件友好 全局的scss变量注入 (additionalData) 生成scss工具类,方案自由可完全由前端或者后端数据自定义 ...
现在Tailwind从v3.0开始支持CSS自定义属性为任意值。
现在Tailwind从v3.0开始支持CSS自定义属性为任意值。
总的来说,就是内置颜色变多了,而且结合 jit 引擎,也让tailwindCSS 配合CSS variables 使用更加的简单。详见 customizing-colors. 有颜色的阴影 现在阴影也有颜色了! 现在颜色的CSS变量使用 --tw-shadow-color: rgb(6 182 212/0.5); 来表示了,写法就是 shadow-cyan-500/50 前面代表使用的颜色,后面代表透明度...