Vue3使用Tailwind CSS

安装 Tailwind 以及其它依赖项

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

生成配置文件:

npx tailwindcss init -p

.修改配置文件 tailwind.config.js

2.6版本 :

module.exports = {purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
}

3.0版本:

module.exports = {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
}

创建一个index.css:

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

在main.ts 引入:
在这里插入图片描述

使用:

<template><divclass="w-screen h-screen bg-red-600 flex justify-center items-center text-8xl text-slate-200">hello tailwind</div>
</template>

效果图:

在这里插入图片描述

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

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

相关文章

arm-none-eabi-gcc not find

解决办法&#xff1a;安装&#xff1a;gcc-arm-none-eabi sudo apt install gcc-arm-none-eabi; 如果上边解决问题了就不用管了&#xff0c;如果解决不了&#xff0c;加上下面这句试试运气&#xff1a; $ sudo apt-get install lsb-core看吧方正我是运气还不错&#xff0c;感…

call,apply,bind

1.这三个方法都能改变this的指向 2.代码实战 let obj1 {name: "小红",age: 20,fn: function () {console.log(当前this的指向,this);console.log(我叫${this.name},今年${this.age}岁);},};obj1.fn(); 这里的代码,obj1是一个对象,里面有属性name和age 正常情况下我…

计数排序详解

前言&#xff1a;这篇文章会给大家把计数排序安排的明明白白&#xff0c;详细的讲解计数排序的原理 例子&#xff1a;现在我有一个数组不知道里面到底有多少个元素&#xff0c;但是我要把它进行排序&#xff0c;怎么排序呢&#xff1f; 我先随便拿一个数组&#xff08;你假装你…

Java JMM

JMM 全称: Java Memory Model (Java 内存模式)。 它是一种虚拟机规范, 用于屏蔽掉各种硬件和操作系统的内存访问差异, 以实现 Java 程序在各种平台下都能达到一致的并发效果。 主要规定了以下两点 一个线程如何以及何时可以看到其他线程修改过后的共享变量的值, 即线程之间共享…

I.MX6ULL_Linux_驱动篇(46)linux LCD驱动

LCD 是很常用的一个外设&#xff0c;在Linux 下LCD 的使用更加广泛&#xff0c;在搭配 QT 这样的 GUI 库下可以制作出非常精美的 UI 界面。本章我们就来学习一下如何在 Linux 下驱动 LCD 屏幕。 Linux 下 LCD 驱动简析 Framebuffer 设备 先来回顾一下裸机的时候 LCD 驱动是怎…

一次 k8s 升级,竟然导致滴滴故障 12 小时?

大家好&#xff0c;我是君哥。 前段时间滴滴的故障相信大家都知道了。中断业务 12 小时定级为 P0 级故障一点都不冤。 故障回顾 网上有传言是运维人员升级 k8s 时&#xff0c;本来计划是从 1.12 版本升级到 1.20&#xff0c;但是操作失误选错了版本&#xff0c;操作了集群降级…

2-5、包含多个段的程序

语雀原文链接 文章目录 1、概述2、代码段中使用数据示例1&#xff1a;不指定程序入口示例2&#xff1a;指定程序入口原理梳理 3、在代码段中使用栈例子1例子2 4、数据、代码、栈放入不同的段例子1&#xff1a;end start指定程序入口第一步&#xff1a;设置栈顶第二步&#xff…

Lambda表达式规则,用法

Lambda表达式是JDK8新增的一种语法格式 1.作用 简化匿名内部类的代码写法 Lambad用法前提&#xff1a;只能简化函数式接口&#xff08;一般加有Funcationallnterface&#xff09;&#xff08;有且仅有一个抽象方法&#xff09;的匿名内部类 匿名内部类&#xff1a;(本质是对…

Linux系统编程:进程间通信总结

管道 在Linux中&#xff0c;管道是一种进程间通信方式&#xff0c;它允许一个进程&#xff08;写入端&#xff09;将其输出直接连接到另一个进程&#xff08;读取端&#xff09;的输入。从本质上说&#xff0c;管道也是一种文件&#xff0c;但它又和一般的文件有所不同。 具体…

Dockerfile 指令的最佳实践

这些建议旨在帮助您创建一个高效且可维护的Dockerfile。 一、FROM 尽可能使用当前的官方镜像作为镜像的基础。Docker推荐Alpine镜像&#xff0c;因为它受到严格控制&#xff0c;体积小&#xff08;目前不到6 MB&#xff09;&#xff0c;同时仍然是一个完整的Linux发行版。 FR…

win11 powershell conda 激活环境后不显示环境名称

win11 powershell conda 激活环境后不显示环境名称 问题现象解决方法 问题现象 安装 Anaconda 后在 powershell 中激活环境后&#xff0c;命令行前面不显示环境名称 解决方法 在 powershell 中执行 conda init 重新打开 poweshell 出现以下问题&#xff0c;请参考 win11 p…

05-详解调用服务时负载均衡的配置及其原理

负载均衡 负载均衡的原理(通用) LoadBalanced注解用来拦截它所标记的RestTemplate发起的http请求, 底层是利用了一个名为Ribbon的组件来实现负载均衡功能(Cloud高版本已经弃用) LoadBalancerInterceptor的intercept方法会对RestTemplate的请求进行拦截 public class LoadBal…