网站配色风格有哪些,公司网页设计的设计过程,南通网站建设方法,做网站协调第一种tailwindcss#xff1a;
tailwindcss官网 https://tailwindcss.com/docs/grid-column
基本介绍及优点分析
Tailwind CSS 中文文档 - 无需离开您的HTML#xff0c;即可快速建立现代网站 PostCss 处理 Tailwind Css 基本流程
PostCSS - 是一个用 JavaScript 工具和插…第一种tailwindcss
tailwindcss官网 https://tailwindcss.com/docs/grid-column
基本介绍及优点分析
Tailwind CSS 中文文档 - 无需离开您的HTML即可快速建立现代网站 PostCss 处理 Tailwind Css 基本流程
PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网
在 vscode 中安装 Tailwind Css 插件增加代码提示
初始化项目 npm init vuelatest 安装 Tailwind Css npm install -D tailwindcsslatest postcsslatest autoprefixerlatest 执行命令生成两个配置文件
postcss.config.jstailwind.config.js npx tailwindcss init -p 配置文档参考配置 - Tailwind CSS 中文文档
修改配置文件 tailwind.config.js
2.6 module.exports {purge: [./index.html, ./src/**/*.{vue,js,ts,jsx,tsx}],theme: {extend: {},},plugins: [],**
3.0版本**cppmodule.exports {content: [./index.html, ./src/**/*.{vue,js,ts,jsx,tsx}],theme: {extend: {},},plugins: [],
}创建 index.css并在 main.ts 中引入
创建 index.css
tailwind base;
tailwind components;
tailwind utilities;第二种unocss
unocss官网 https://unocss.dev/config/rules unocss最好配合vite去构建文件 操作搜索页面 unocss 原子化
重新构想原子化CSS - 知乎
unocss 原子化参考资料
由于个人感觉此模块在实际项目中应用很少所以不做记录但是为了以防万一先记下来之前看过的文章及视频讲的非常清晰给大佬点赞~~ 小满Vue3第三十七章 unoCss原子化_哔哩哔哩_bilibili 小满Vue3第三十七章unocss原子化_小满zs的博客-CSDN博客
unocss配置(案例)
安装依赖 npm i --save unocss,unocss/reset mian.ts中引入
import unocss/reset/tailwind.css //初始化css
import uno.css//引入unocss新建unocss.config.ts
可 查看配置文档
import {defineConfig,presetAttributify,presetUno,presetIcons,
} from unocss;
export default defineConfig({//预设m-3 p-3presets: [presetUno(),presetAttributify(),presetIcons({ scale: 1.2, warn: true }),],//快捷方式shortcuts: [[wh-full, w-full h-full],[f-c-c, flex justify-center items-center],[flex-col, flex flex-col],[text-ellipsis, truncate],[icon-btn,text-16 inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-primary !outline-none,],],//正则rules: [[/^bc-(.)$/, ([, color]) ({ border-color: #${color} })],[card-shadow,{box-shadow:0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017,},],],theme: {colors: { primary: var(--primary-color), dark_bg: var(--dark-bg) },},
});vite.config.ts中注入
import unocss from unocss/viteplugins: [unocss(),react()]//unocss一定要放react之前处理unocss写入标签报错
src目录下新建 html.d.ts
//react
import type {AttributifyAttributes} from unocss/preset-attributify
declare module react{interface HTMLAttributesT extends AttributifyAttributes {}//tsx标签写uno不报错
}
//vue
import type {AttributifyAttributes} from unocss/preset-attributify
declare module vue/runtime-dom{interface HTMLAttributes extends AttributifyAttributes {}//tsx标签写uno不报错
}unocss的插件
配置2案例 unocss配置 Vue3 学习笔记 —— scoped、tailwind、unocss 原子化、Vue3 样式新特性 重新构想原子化CSS
