一开始的时候觉得这都什么鬼，感觉写的很丑陋。 但写了一阵子之后... 真香了，其实使用这个还是相当于手写样式，但就减少了很多的重复
之前我写样式都是，HTML 中一堆 .content .header .card .body .footer .left .right 之类的，然后 scss 文件中也是这些各种嵌套，即便使用了 mixin 但还是感觉很多冗余，有些东西感觉提取一个 mixin 没必要，但确实又由两三个地方有点重复
其次(搜索一个之后)看右边，这里可以跳到响应和伪类可以看着加一些 hover 之类的效果，其次就是 Customizing 了，定制，靠这个定制可以覆盖它原有的样式，添加新的样式
javascript
module.exports = {
theme: {
/** 扩展原来的配置，冲突了的以扩展的为准，如果直接写在theme里面会覆盖导致没有默认配置 */
extend: {
colors: {
/** 黑色，重色 顶栏 */ dark: "#1b1b1b",
/** 背景色 */ bg: "rgba(237, 237, 237)",
/** 背景色 245 浅灰 */ 245: "rgba(245, 245, 245)",
/** 警告浅色 */ "warning-light": "#ffe8ea",
/** 警告 重色 */ "warning-heavy": "#f5222d",
/** 字 黑色 基础色 */ black: "#333",
/** 字 灰色 */ gray9: "#999",
/** 字 灰色 666 */ gray6: "#666",
/** fff 最白色 */ fff: "#fff",
},
height: {
sm: "14px",
md: "16px",
lg: "24px",
xl: "48px",
},
/** 自定义间距 最高 100 px */
spacing: (() => {
const spacing = {};
for (let i = 0; i < 100; i++) {
spacing[i] = `${i}px`;
}
return spacing;
})(),
/** 字体大小 */
fontSize: (() => {
const size = {};
for (let i = 0; i < 50; i++) {
size[i] = `${i}px`;
}
Object.assign(size, {
sm: "14px",
base: "16px",
lg: "24px",
xl: "48px",
});
return size;
})(),
/** 字体间距 */
letterSpacing: (() => {
const spacing = {};
for (let i = 0; i < 30; i++) {
spacing[i] = `${i}px`;
}
return spacing;
})(),
},
},
};
css
/* 罪魁祸首 */
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/** 解决方案 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
-moz-appearance: none;
-webkit-appearance: none;
}
1
tailwind.css 对于小程序按钮样式的影响，前两天发现小程序按钮的默认样式一直去不掉，今天才发现是因为 tailwind.css 导致的。 他有一段上面那样的 CSS 采用了系统自定义的按钮样式导致你怎么覆盖 button::after 都没有用