配置与主题

Tailwind CSS 教程 · 第 7 章 · 6 次浏览

tailwind.config.js 是 Tailwind 的配置中心。默认主题够用，但项目里常要扩展品牌色、字体、断点。

常用配置

theme.extend.colors：加自定义颜色，如 brand
theme.extend.fontFamily：指定字体
theme.extend.spacing：扩展间距刻度
content：告诉 Tailwind 扫描哪些文件里的类名（重要，漏了类会被删）

dark mode

Tailwind 默认 dark: 前缀跟随系统，配置 darkMode: "class" 后，在 html 加 dark 类即可手动切换。

修改配置后

改完配置要重新构建才会生效。如果用了 --watch，保存配置会自动重新编译。

代码示例

// tailwind.config.js
module.exports = {
    content: ["./src/**/*.{html,js}"],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                brand: {
                    light: "#8bc34a",
                    DEFAULT: "#558b2f",
                    dark: "#33691e",
                },
            },
            fontFamily: {
                sans: ["PingFang SC", "Microsoft YaHei", "sans-serif"],
            },
        },
    },
    plugins: [],
};

📚 JavaScript 语法速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`let x = 1;`	声明变量（可重新赋值）
`const y = 2;`	声明常量（不可重新赋值）
`var 已过时`	旧式变量声明，建议用 let/const
`if (条件) { } else { }`	条件判断
`for (let i = 0; i < n; i++) { }`	循环
`while (条件) { }`	条件循环
`function fn(a, b) { return a + b; }`	函数声明
`const fn = (a) => a + 1;`	箭头函数
`array.push(x) / pop()`	数组尾部添加 / 删除
`array.map(fn) / filter(fn)`	数组映射 / 过滤
`obj.key / obj["key"]`	访问对象属性
`JSON.stringify(obj)`	对象转 JSON 字符串
`JSON.parse(str)`	JSON 字符串转对象
`document.getElementById("id")`	按 id 取元素
`document.querySelector("选择器")`	按选择器取第一个元素
`element.textContent`	读写元素文本
`element.innerHTML`	读写元素 HTML（慎用，防 XSS）
`element.addEventListener("click", fn)`	绑定事件
`console.log(x)`	控制台输出（调试）
`setTimeout(fn, 1000)`	延迟执行（毫秒）
`window.location.href`	当前页面地址（可赋值跳转）
`localStorage.setItem("k", v)`	本地存储写入
`localStorage.getItem("k")`	本地存储读取
`new Promise((resolve, reject) => {})`	Promise 异步处理
`async / await`	异步函数语法糖