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

大功告成!

相关推荐
dy17172 分钟前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
rannn_1115 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java5 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5