【2024】使用Vuetifi搭建vue3+Ts项目,并使用tailwind.css

目录

只要跟着官方文档来就不会出错。

使用Vuetifi搭建项目

bash 复制代码
npm create vuetify

yarn create vuetify

pnpm create vuetify

bun create vuetify

在终端运行一个就行,之后就可以选配置了。

使用tailwind.css

先运行:

bash 复制代码
npm install -D tailwindcss postcss autoprefixer

再运行:

bash 复制代码
npx tailwindcss init -p

然后就会发现多了两个文件:

然后配置tailwind.config.js文件:

javascript 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  corePlugins: {
    preflight: false
  },
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        bg_color: "var(--el-bg-color)",
        primary: "var(--el-color-primary)",
        primary_light_9: "var(--el-color-primary-light-9)",
        text_color_primary: "var(--el-text-color-primary)",
        text_color_regular: "var(--el-text-color-regular)",
        text_color_disabled: "var(--el-text-color-disabled)"
      }
    }
  }
};

在src目录下新建一个css文件,这里是index.css:

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

然后在main.ts里面引入这个文件:

css 复制代码
import './index.css'

大功告成!

相关推荐
云和数据.ChenGuang2 分钟前
vue钩子函数调用问题
前端·javascript·vue.js
鹏多多17 分钟前
React动画方案对比:CSS动画和Framer Motion和React Spring
前端·javascript·react.js
亿元程序员21 分钟前
8年游戏主程,一篇文章,多少收益?
前端
IT_陈寒35 分钟前
5个Java 21新特性实战技巧,让你的代码性能飙升200%!
前端·人工智能·后端
咖啡の猫37 分钟前
Vue内置指令与自定义指令
前端·javascript·vue.js
昔人'44 分钟前
使用css `focus-visible` 改善用户体验
前端·css·ux
前端双越老师1 小时前
译: 构建高效 AI Agent 智能体
前端·node.js·agent
艾小码1 小时前
告别数据混乱!掌握JSON与内置对象,让你的JS代码更专业
前端·javascript
liangshanbo12156 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js