前端项目支持tailwindcss写样式

ops/2024/11/24 22:17:43/
  • 安装
npm install -D tailwindcss
npx tailwindcss init
  • 配置 tailwind.config.js
//根据个人需求填写,比如vue简单配置
/** @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)"}}}
};
  • Tailwind 的指令添加到你的 CSS 文件中,可以新建css文件并贴入以下代码,并且在main文件种引入该css
@tailwind base;
@tailwind components;
@tailwind utilities;
  • postcss.config.js 调整
export default {plugins: {tailwindcss: {},autoprefixer: {}}
};

现在就可以在你的项目种直接使用tailwindcss,附上官网链接:tailwindcss


http://www.ppmy.cn/ops/136415.html

相关文章

react native 安装好apk后无法打开

react native 打包好apk安装完成&#xff0c;没有打开app按钮&#xff0c; 在AndroidManifest.xml中 <intent-filter><action android:name"android.intent.action.MAIN" /><category android:name"android.intent.category.LAUNCHER" /&…

利用 Python 和 Selenium 高效启动和管理 Chrome 浏览器

在自动化测试和网页抓取的过程中&#xff0c;Selenium 是最常用的工具之一。其强大的功能可以与浏览器无缝集成&#xff0c;实现复杂的操作。然而&#xff0c;为了提高效率和扩展性&#xff0c;尤其在处理大量任务时&#xff0c;我们可以通过定制化的方法启动 Chrome 浏览器并与…

从0开始分享一个React项目:React-ant-admin

​ 项目源码&#xff1a;https://gitee.com/kong_yiji_and_lavmi/react-ant-admin 项目介绍网站:https://z3web.cn/doc-react-ant-admin/guide/start.html 建议学完React基本知识后&#xff0c;此项目巩固和了解基本知识在项目中如何使用&#xff0c;以及项目架构。 在此基础上…

在win10环境部署opengauss数据库(包含各种可能遇到的问题解决)

适用于windows环境下通过docker desktop实现opengauss部署&#xff0c;请审题。 文章目录 前言一、部署适合deskdocker的环境二、安装opengauss数据库1.配置docker镜像源2.拉取镜像源 总结 前言 注意事项&#xff1a;后面docker拉取镜像源最好电脑有科学上网工具如果没有科学上…

OAI-5G开源通信平台实践(三)

端到端验证相关问题及分析解决 PlmnTACSlice配置UE imsi配置opc/key配置问题5GC侧配置如下:错误现象解决PlmnTACSlice配置 #1. UERANSIM接5GS##AMF报错 02/21 18:05:18.949: [amf] INFO: gNB-N2 accepted[127.0.0.1] in master_sm module (../src/amf/amf-sm.c:741) 02/21 18…

2024年9月中国电子学会青少年软件编程(Python)等级考试试卷(六级)答案 + 解析

一、单选题 1、下面代码运行后出现的图像是&#xff1f;&#xff08; &#xff09; import matplotlib.pyplot as plt import numpy as np x np.array([A, B, C, D]) y np.array([30, 25, 15, 35]) plt.bar(x, y) plt.show() A. B. C. D. 正确答案&#xff1a;A 答案…

Java 创建不可变集合

Java中为了安全起见&#xff0c;有时候不想让别人改集合中的数据&#xff0c;那么就可以使用不可变集合。 package listExercise;import java.util.HashMap; import java.util.Map; import java.util.Set;/*** 不可变集合* 长度不变&#xff0c;内容无法修改的集合* 当集合中的…

QSqlTableModel setModel 和 独立设置信号槽冲突

经测试&#xff0c;QSqlTableModel如果预先设置了和 sqlmodel->setTable(tableName); sqlmodel->select(); tableView->setModel(&sqlmodel);再对QSqlTableModel使用信号槽链接&#xff0c;会导致submitAll()提交成功但是数据库实际上没更新的情况。 connect(te…