tailwindcss官网安装npm i tailwindcss tailwindcss/vite配置// vite.config.jsimporttailwindcssfromtailwindcss/viteplugins:[tailwindcss(),]公共样式 style.css/* style.css */importtailwindcss;/* 公共的css代码 */layerbase{*{margin:0;padding:0;}}custom-variantdark(:where(.dark,.dark *));/* 黑暗主题添加 */theme{/* 品牌色阶梯 —— 自动生成 bg-brand-500 / text-brand-600 等 */--color-brand-50:#eff6ff;--color-brand-500:#3b82f6;--color-brand-600:#2563eb;--color-brand-700:#1d4ed8;/* 语义色 */--color-success:#22c55e;--color-warning:#f59e0b;--color-error:#ef4444;/* 中性色 */--color-gray-50:#f9fafb;--color-gray-900:#111827;/* 定义字体 */--text-2xl:20px;--text-3xl:24px;}/* 黑暗主题添加 */.dark{--color-brand-500:#60a5fa;--color-bg:#111827;--color-text:#f9fafb;}黑暗主题动态的添加dark 即可document.documentElement.classList.add(dark);全局引入 上面创建的 style.css// main.js 文件import/style.css在组件中使用// 上面定义的 --color-brand-500 换成 bg-brand-500 等等即可divclasstext-brand-500/div切换主题:root{/* 默认显示这个颜色 */--color-primary:#22c55e;--color-primary-hover:#22c55e;}.success{--color-primary:#33c55e;--color-primary-hover:#44c55e;}.warning{--color-primary:#33c55e;--color-primary-hover:#44c55e;}theme{/* 主题色 */--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);}/*使用*/div classbg-primary hover:bg-primary-hover测试/div/*修改主题色*/document.documentElement.classList.remove(success,warning);document.documentElement.classList.add(warning);tailwind 的响应式sm: 表示的 640pxmd: 表示的 768pxlg: 表示的 1024pxxl: 表示的 1280px2xl: 表示的 1536pxdivclasssm:w-1/2 md:w-2/3 lg:w-3/4 xl:w-4/5 2xl:w-5/6/div写一些其他的公共css代码layerbase{...}语法/* 盒模型相关 */1 w-xx 宽度 h-ww 高度 bg-xx 背景 min/max-w/h-xx 最小宽度/高度 2 p-xx padding m-xx margin 3 border-xx border xx 指的是长度或者颜色 rouned-xx圆角 shadow阴影 4 absolute relative fixed top-xx left-xx z/* 例子 */div classw-10/div 直接跟的值 乘以4 得到的是像素自适应 div classw-1/3/div 占 1/3宽度 div classw-[10px]/div 直接写多少像素 div classmin-w-lg/div div classp-10/div div classp-[10px]/div div classpx-10/div div classpl-10/div/* 文字 */1 text-xx 字体颜色、大小、对齐 2 font-xx 加粗font-weight 3 leading-xx行高 line-height/* 例子 */div classtext-sky-500 text-lg text-[32px] text-center/div 字体颜色、大小、对齐 div classfont-bold/div 字体加粗 div classleading-[10px]/div/* flex */1 flexdisplay:flex 2 flex-row/colflex-diraction:column/row 3 justify-xxjustify-between 4 items-xxitems-center 5flex-1:flex:1;