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

大功告成!

相关推荐
golang学习记9 分钟前
从0死磕全栈之Next.js 字体优化实战:零布局偏移、高性能、隐私友好的字体加载方案
前端
张可爱17 分钟前
20251015-Vue3八股文整理
前端
ruanCat18 分钟前
记一次因 vue-router 升级而导致的 uniapp 故障
前端·vue.js
Damon小智18 分钟前
基于 Rokid JSAR 打造精致的 3D 白色飞机模型
前端·虚拟现实
Mintopia21 分钟前
🌌 知识图谱与 AIGC 融合:
前端·javascript·aigc
三十_24 分钟前
TypeORM 基础篇:项目初始化与增删改查全流程
前端·后端
小时前端27 分钟前
事件委托性能真相:90%内存节省背后的数据实证
前端·dom
半木的不二家30 分钟前
全栈框架Elpis实战项目-里程碑一
前端
fox_31 分钟前
CSS3:水平垂直居中的 N 种实现方法
css