【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'

大功告成!

相关推荐
Vicky&James6 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_7482336410 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟19 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386319 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596020 分钟前
前端代理,解决跨域问题讲解
前端
quitv25 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238134 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星35 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
_GR1 小时前
Qt开发⑧Qt的窗口_下_浮动窗口+对话框
开发语言·css·c++·qt·microsoft
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios