初始化Tailwind配置文件:npx tailwindcss init -p 修改tailwind.config.js:/**@type{import('tailwindcss').Config}*/ module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: { colors: { primary:'#1890ff',// 扩展主题色 } }, }, ...
npx tailwindcss init -p 创建完成,目录结构如下: 配置Tailwind CSS 打开 tailwind.config.js 文件并修改为: 实例 /** @type {import('tailwindcss').Config} */ exportdefault{ content:[ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme:{ extend:{}, }, plugins:[], } 添加...
@tailwindbase;@tailwindcomponents;@tailwindutilities; main.ts中引入tailwind.css 配置完成后需要引入tailwindcss,修改src/main.ts内容如下: import'@/styles/tailwindcss.css';import'./assets/main.css'import{ createApp }from'vue'import{ createPinia }from'pinia'importAppfrom'./App.vue'importrouterfrom'....
创建tailwind.css 在src目录下创建styles目录,在styles目录下创建tailwind.css。 image.png tailwind.css文件内容如下: @tailwind base; @tailwind components; @tailwind utilities; main.ts中引入tailwind.css 配置完成后需要引入tailwindcss,修改src/main.ts内容如下: import '@/styles/tailwindcss.css'; import ...
@文心快码vite vue3 ts 安装tailwindcss 文心快码 在Vite + Vue 3 + TypeScript 项目中安装 Tailwind CSS 的步骤如下: 1. 初始化 Vue 3 + TypeScript 项目 如果你还没有创建 Vue 3 项目,可以使用以下命令初始化一个使用 Vite 和 TypeScript 的 Vue 3 项目: bash npm create vite@latest my-vue-app ...
/** @type {import('tailwindcss').Config} */exportdefault{content:["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme:{extend:{},},plugins:[],} 在这个例子中,我们扩展了颜色配置,添加了一个名为primary的自定义颜色;同时扩展了字体配置,添加了一个名为sans的自定义字体。
修改tailwind.config.js ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'] 编辑 CSS 中引入 Tailwind 创建./src/index.css 文件 并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式,来替换掉原来的文件内容。 /* ./src/index.css */ @tailwind base; @tailwin...
现在可以在项目中使用 TailwindCSS 类,例如 text-center、bg-red-500 等。 <template>点我</template> 2.7、浏览器效果 默认效果 鼠标划上 鼠标点击
配置Tailwind CSS 打开 tailwind.config.js 文件并修改为: 实例 /** @type {import('tailwindcss').Config} */ exportdefault{ content:[ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme:{ extend:{}, }, plugins:[], ...
{ log_not_found off; # 关闭日志 expires 7d; # 缓存时间7天 add_header Cache-Control max-age=604800; } location ~* ^.+\.(css|js|md|pdf|)$ { expires 1d; # 可能会频繁变动的资源只缓存1天 add_header Cache-Control max-age=86400; } # 开启gzip gzip on; # 启用gzip压缩的最小文件,...