.button { background-color: rgba(247, 186, 30, 0.6); } .tab { background-color: rgba(247, 186, 30, 0.6); } 后期我们想要更改项目的颜色方案,我们需要找到此颜色的每个实例并在「所有地方」进行更新。对所有实例进行手动替换,这是一步耗时且充满危险的举动,你可能会误伤其他的变量,又或者遗漏部分变...
pc\:hover\:bg-white:hover { --tw-bg-opacity: 1 !important; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important } 这里生成了 6 个 原子功能类。 设问: 当启动深色模式即当 darkMode 值为 'media' 或 'class'时, 会生成多少个原子功能类呢? 答: 启动深色模式,会再...
有人说它类名科学易记，但是，根本就不该有类名，就应该inline写法。没有样式复用这回事，该复用的是...
padding-left: 21.066667vw; background-color: rgba(61, 61, 63, 0.9); height: 12.8vw; z-index: 1000; } After 写起来实在是太爽了! 其实就这一个原因就够了 2. Tailwindcss是为移动而生,非常简单就可以将适配写好,超级简单 一行代码搞定手机、平板、电脑的支持。 <!-- ... --> 如官网示例 3....
首先我们要做的第一件事情,是在官方文档中,找到background color对应的缩写是什么 然后在 extend 字段中,对应的字段里,配置自定义的语法,heise. 代码语言:javascript 复制 theme:{extend:{backgroundColor:{heise:{0:'rgba(0, 0, 0, 0)',1:'rgba(0, 0, 0, 0.1)',2:'rgba(0, 0, 0, 0.2)',3:...
如:mt-2表示margin-top: 0.5rem。对于 opacity 等属性还有属性值,如bg-opacity-30表示--tw-bg-opacity: 0.3; // e.g. background-color: rgba(0, 0, 0, var(--tw-bg-opacity));。(对于颜色、变换等,都会使用变量。)还提供了一些字面量,如mdsm等用于响应式布局。
如果你不需要使用background-opacity，你可以通过在tailwind.config.js中添加这个选项来禁用它：
theme: { extend: { backgroundColor: { heise: { 0: 'rgba(0, 0, 0, 0)'...
background-color: rgba(247, 186, 30, 0.6); } .tab { background-color: rgba(247, 186, 30, 0.6); } 1. 2. 3. 4. 5. 6. 7. 后期我们想要更改项目的颜色方案,我们需要找到此颜色的每个实例并在「所有地方」进行更新。对所有实例进行手动替换,这是一步耗时且充满危险的举动,你可能会误伤其他的...
background-color: #fff; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .chat-notification-logo-wrapper { flex-shrink: 0; } .chat-notification-logo { height: 3rem; width: 3rem; ...