如何在vue2中使用tailwind

查看官方文档,不要去看过时的文章!

使用官网推荐的第一个安装方法 Installation - Tailwind CSS

vue版本:2.6.10

1. 安装tailwind的包

npm install -D tailwindcss
npx tailwindcss init

2. tailwind.config.js 文件中的content是你需要使用tailwind的文件路径

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/views/**/*.vue"],theme: {extend: {colors: {grey: {default: '#999999'},yellow: {default: '#FF9A00',},},fontSize: {'small': ['12px'],}},},plugins: [],
}

3. 新建tailwind.css文件
 

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 根据你的tailwind.css 文件生成output文件

npx tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/output.css --watch

5. 将output.css 文件引入你的main.js

这样就能在vue2中使用tailwind了。打包后是否生效还未测试(待更新)

注意事项:

1. 开发过程中需要开启监听命令,output文件会实时生成类名

2. 每次修改完tailwind.config.js,需要重启监听命令

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/18000.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[自动驾驶技术]-2 感知系统之传感器功能和网络方案

1 传感器功能 自动驾驶系统通常使用多种传感器来实现对车辆周围环境的全面感知,包括摄像头、雷达、激光雷达(LiDAR)、超声波传感器、惯性测量单元(IMU)和全球定位系统(GPS)。 以下是我们对这些…

深度神经网络介绍与实战

一、介绍 深度神经网络(Deep Neural Networks,DNNs)是一种强大的机器学习算法,被广泛应用于计算机视觉、自然语言处理、语音识别等领域。它是人工神经网络的一种扩展,包含多个隐藏层,每一层都由多个神经元组成。 与传统的机器学习算法相比,深度神经网络具有以下特点:…

【ARFoundation自学03】平面追踪可视化效果美化

对已检测到的平面默认的渲染效果显得有些生硬和突兀,有时我们需要更加友好、美观的的平面虚拟界面,这时就需要对已检测到的平面定制个性化的可视方案。为达到更好的视觉效果,处理的思路如下。 视觉效果前后对比! (本节…

Spring:事务(tx)

1. 简介 spring对jdbc进行封装&#xff0c;简化对数据库的操作 2. HelloWorld 1. 搭建模块 2.加入依赖 <dependencies><!--spring jdbc Spring 持久化层支持jar包--><dependency><groupId>org.springframework</groupId><artifactId>s…

力扣刷题--1528. 重新排列字符串【简单】

题目描述 给你一个字符串 s 和一个 长度相同 的整数数组 indices 。 请你重新排列字符串 s &#xff0c;其中第 i 个字符需要移动到 indices[i] 指示的位置。 返回重新排列后的字符串。 示例 1&#xff1a; 输入&#xff1a;s “codeleet”, indices [4,5,6,7,0,2,1,3] 输…

Java中深拷贝和浅拷贝详解学习

一、什么是深拷贝&#xff1f;什么是浅拷贝&#xff1f; Java中深拷贝和浅拷贝都是与Java中对象的复制有关。Java 中的深拷贝和浅拷贝通常通过实现 Cloneable 接口并重写 clone() 方法来实现。 浅拷贝&#xff1a; 在浅拷贝中&#xff0c;只有对象的基本数据类型属性被复制&…

Clickhouse 嵌套数据类型总结—— Clickhouse 基础篇(三)

文章目录 创建嵌套类型的表插入读取数据在嵌套类型上使用数组函数 在 clickhouse 中存储嵌套类型的关键字是 Nested, 只支持一级嵌套。数据结构类似于在数据结构类似于在表的单元格里面嵌套“一张表格”&#xff0c;如下图所示&#xff1a; 嵌套类型是列存储&#xff0c;本质…

【传知代码】遵循人类指令的高质量图像修复(论文复现)

前言&#xff1a;在数字化时代的浪潮中&#xff0c;图像已成为我们生活中不可或缺的一部分。它们记录着我们的记忆&#xff0c;传递着信息&#xff0c;甚至塑造着我们的认知。然而&#xff0c;正如生活中难以避免的瑕疵&#xff0c;这些数字图像也时常因为各种原因出现损伤、失…

每小时电量的计算sql

计算思路&#xff0c;把每小时的电表最大记录取出来&#xff0c;然后用当前小时的最大值减去上个小时的最大值即可。 使用了MYSQL8窗口函数进行计算。 SELECT b.*,b.epimp - b.lastEmimp ecValue FROM ( SELECT a.deviceId,a.ctime,a.epimp, lag(epimp) over (ORDER BY a.dev…

RangeNet++ 检测3D点云语义算法的详细配置和常见问题

配置环境&#xff1a; Ubuntu18.04 GPU&#xff1a;GeForce MX150 驱动&#xff1a;Ubuntu推荐的nvidia-driver-470 Cuda10.1 cudnn7.6.2 TensorRT 5.1.5.0GCC 7.5.0 运行代码&#xff1a; RangeNet 目录 目录 一、环境配置 1. Ubuntu 18.04 安装NVIDIA驱动 &…

蒲公英旁路组网:总部旁路,分部一级组网方案

总部网关下连接蒲公英路由&#xff0c;分部主机安装蒲公英客户端。总部和分部登录相同账号异地组网。 总部路由地址192.168.1.10&#xff0c;10.168.1.1&#xff0c;172.16.2.5&#xff0c;分部主机地址192.168.43.2&#xff0c;172.16.2.25。 分部主机已经自动添加了路由&am…

基于Vue uni-app的自定义列表表格信息展示组件

摘要&#xff1a;随着软件技术的不断发展&#xff0c;前端开发面临着越来越多的挑战。特别是在业务场景复杂多变的情况下&#xff0c;如何提高开发效率和降低维护成本成为了关键。本文旨在探讨组件化开发在前端应用中的重要性&#xff0c;并以Vue uni-app自定义列表表格为例&am…

R语言lavaan结构方程模型(SEM)

结构方程模型&#xff08;Sructural Equation Modeling&#xff0c;SEM&#xff09;是分析系统内变量间的相互关系的利器&#xff0c;可通过图形化方式清晰展示系统中多变量因果关系网&#xff0c;具有强大的数据分析功能和广泛的适用性&#xff0c;是近年来生态、进化、环境、…

vue3 ts typescript 路由报错 is not assignable to parameter type RouterOptions

解决方法&#xff1a; import { createRouter, createWebHistory } from vue-router import type {RouterOptions} from vue-routerimport HomeView from ../views/HomeView.vueconst router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{p…

React Native 之 像素比例(十七)

在 React Native 中&#xff0c;PixelRatio 是一个用于获取设备像素比&#xff08;Pixel Ratio&#xff09;的实用工具。像素比&#xff08;或称为设备像素密度、DPI 密度等&#xff09;是物理像素和设备独立像素&#xff08;DIPs 或 DPs&#xff09;之间的比率。设备独立像素是…

I.MX6ULL模仿 STM32 驱动开发格式实验

系列文章目录 I.MX6ULL模仿 STM32 驱动开发格式实验 I.MX6ULL模仿 STM32 驱动开发格式实验 系列文章目录一、前言二、模仿 STM32 寄存器定义2.1 STM32 寄存器定义简介2.2 I.MX6Ul 寄存器定义2.3硬件原理图2.4实验程序编写 三、编译下载验证 一、前言 使用 C 语言编写 LED 灯驱…

2024年中国金融行业网络安全市场全景图

网络安全一直是国家安全的核心组成部分&#xff0c;特别是在金融行业&#xff0c;金融机构拥有大量的敏感数据&#xff0c;包括个人信息、交易记录、财务报告等&#xff0c;这些数据的安全直接关系到消费者的利益和金融市场的稳定&#xff0c;因此金融行业在网络安全建设领域一…

SSL协议:网络安全通信的守护者

在网络通信迅猛发展的今天&#xff0c;数据安全和隐私保护变得尤为重要。安全套接层协议&#xff08;Secure Sockets Layer, SSL&#xff09;作为早期网络加密及身份验证的基石&#xff0c;为在线数据传输提供了安全保障。下面我们就来了解一下SSL协议。 SSL协议概述 SSL协议最…

LIBRARIES: 彻底解决conda install慢的问题

来源&#xff1a; “码农不会写诗”公众号 链接&#xff1a;LIBRARIES: 彻底解决conda install慢的问题 文章目录 01 conda升级02 设置mamba solver03 换源 conda install conda install是Anaconda平台的包管理命令&#xff0c;用于安装第三方库。conda是Anaconda平台默认的包管…

[nextjs]推荐几个很好看的模板网站

最近在做网站,折腾了 vue 框架,然后发现了 nextjs 框架,感觉这个做出来的网站配色很好看,然后又开始研究这个 网站配色好看是因为用的 tailwindcss,找网站过程中,发现了几个很好看的模板网站,在这里推荐下,或许你也能用得上 推荐第一个网站是: https://tailspark.co/ 有组件,也…