三步在 vite 中配置 tailwindcss

前言

  • tailwindcss 是一个原子化的 css 工具,可以让你免于写 css,只写 html 即可
  • 原理:利用你写的 html 的 class 名称来生成 css 样式,理解为一个 postcss 插件或 loader

第一步:安装 tailwindcss

npm i -D tailwindcss

第二步:引入 tailwindcss/tailwind.css

  • 在你的主程序里面引入此样式,和引入其他 UI 框架样式一样的写法
// src/main.js
import 'tailwindcss/tailwind.css'

第三步:vite.config.js 配置插件

import tailwindcss from 'tailwindcss'export default defineConfig({plugins: [vue()],css: {postcss: {plugins: [tailwindcss({content: ['./src/**/*.vue']})]}}
})

完成

  • 这样你就可以在 vue 的 html 标签上添加 class 了,例如:w-10
    元素图片
<div class="w-200 text-20">演示文本</div>

rem 改为 px

  • 默认生成的样式单位是 rem,但是有时候我们想要的是 px
  • 更改 vite.config.js 配置,改为 px
import tailwindcss from 'tailwindcss'const spacing = {}Array.from({ length: 1000 }, (_, i) => {spacing[i] = `${i}px`
})export default defineConfig({plugins: [vue()],css: {postcss: {plugins: [tailwindcss({content: ['./src/**/*.vue'],theme: {spacing,extend: {fontSize: ({ theme }) => theme('spacing')}}})]}}
})

其它替换 tailwind.css 使用的方式

  • 直接在 CSS(less, scss 文件都行) 里引入样式
@tailwind base;@tailwind components;@tailwind utilities;
  • 如果只要 utilities 那么还可以简化
  • main.js
import 'tailwindcss/utilities.css'
  • .{css,less,scss}
@tailwind utilities;

总结

  • 最简单的就是只使用前面三步就够了,更多操作和配置可以看官网或者源码

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

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

相关文章

图片恢复的实用指南,为你拯救遗失的记忆!

随着科技的日新月异&#xff0c;我们的生活已被照片填满。它们记录着我们的喜怒哀乐&#xff0c;见证着每一个重要的时刻。但我们往往会因为各种原因将手机图片遗失&#xff0c;有什么方法可以恢复呢&#xff1f;本文将提供一份实用的图片恢复指南&#xff0c;帮助你找回那些遗…

ArrayList和LinkedList的使用

ArrayList List<> list new ArrayList<>(); LinkedList

SQL注入漏洞常用绕过方法

SQL注入漏洞 漏洞描述 Web 程序代码中对于用户提交的参数未做过滤就直接放到 SQL 语句中执行&#xff0c;导致参数中的特殊字符打破了原有的SQL 语句逻辑&#xff0c;黑客可以利用该漏洞执行任意 SQL 语句&#xff0c;如查询数据、下载数据、写入webshell 、执行系统命令以及…

WPF使用ItemsControl显示Object的所有属性值

对于上位机开发&#xff0c;我们有时候有这样的需求&#xff1a;如何显示所有的IO点位&#xff1f;比如有10个IO点位&#xff0c;那我们要写10个TextBlock去绑定这10个点位的属性&#xff08;本文暂时不考虑显示的样式&#xff0c;当然也可以考虑&#xff09;&#xff0c;当点位…

霍庭格TruPlasma MF 7100 7050电源现货50KW

霍庭格TruPlasma MF 7100 7050电源现货50KW

【C语言深度解剖】:(11)函数指针、函数指针数组、指向函数指针数组的指针、回调函数

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《C语言深度解剖》《精通C指针》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多C语言深度解剖点击专栏…

AVDemo漏洞平台黑盒测试

信息收集 说明一下&#xff1a; 因为是本地的环境&#xff0c;端口这些就不扫描了&#xff0c; 还有这个是某个dalao写的平台&#xff0c;也就检测不到什么cms了&#xff0c; 信息收集&#xff0c;端口&#xff0c;cms这些是必做的&#xff0c; 首先&#xff0c;这里先简单的…

web3 ETF软件开发难点

开发一个涉及到 Web3 ETF&#xff08;Exchange-Traded Fund&#xff0c;交易所交易基金&#xff09;的软件可能会面临一些挑战和难点&#xff0c;特别是在整合 Web3 技术和金融服务方面。以下是一些可能的难点。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&am…

记一次:mysql统计的CAST函数与json字段中的某个字段

前言&#xff1a;因为需求的问题&#xff0c;会遇到将某个json存入到一个字段中&#xff0c;但在统计的时候&#xff0c;又需要将这个json中的某个字段作为条件来统计&#xff0c;所以整理了一下cast函数和json中某个字段的条件判断 一、浅谈mysql的json 1.1 上例子 SELECTli…

植物大战僵尸杂交版(含下载方式)

最近时间&#xff0c;一款很火的植物大战僵尸杂交版火爆出圈&#xff0c;在玩家之间疯狂扩散。各种奇特的杂交组合让游戏变得更加有趣。 游戏介绍 植物大战僵尸杂交版是一款将《植物大战僵尸》和植物杂交概念结合在一起的独特塔防策略游戏。它将《植物大战僵尸》中的植物与进行…

Minio 对象存储 OSS概述

系列文章目录 第五章 Minio 对象存储 OSS概述 Minio 对象存储 OSS概述 系列文章目录对象存储 OSS基本概念存储空间&#xff08;Bucket&#xff09;对象&#xff08;Object&#xff09;ObjectKeyRegion&#xff08;地域&#xff09;Endpoint&#xff08;访问域名&#xff09;Ac…

C#知识|上位机子窗体嵌入主窗体方法(实例)

哈喽,你好啊,我是雷工! 上位机开发中,经常会需要将子窗体嵌入到主窗体, 本节练习C#中在主窗体的某个容器中打开子窗体的方法。 01 需求说明 本节练习将【账号管理】子窗体在主窗体的panelMain容器中打开。 账号管理子窗体如下: 主窗体的panelMain容器位置如图: 02 实现…

一次JAVA接口优化记录

目录 一次接口优化记录首先考虑&#xff0c;添加缓存缓存策略方案一&#xff1a;本地缓存方案二&#xff1a;Redis缓存 优化结果原因分析&#xff1a;原因验证 接口数据分析将响应数据返回大小减少compression压缩配置完美&#xff08;代指这里的小系统&#xff09; 一次接口优…

CentOS 的常见命令

CentOS 是一种广泛使用的 Linux 发行版&#xff0c;特别在服务器环境中。本文将详细介绍 CentOS 中常见的命令&#xff0c;以便帮助用户在操作系统中有效地进行各种操作。下面介绍一下文件和目录操作、用户和权限管理、系统信息查看、软件包管理以及网络配置等方面的命令。 一…

应用层协议【HTTP和HTTPS】

1.概念 1.1 协议 协议是指在计算机通信和网络通信中&#xff0c;为了实现数据交换而建立的一套规则、约定或者标准。它定义了通信双方之间的通信格式、传输方式、数据的含义、错误处理等细节&#xff0c;从而确保通信的可靠性、有效性和安全性。 >1在计算机网络中&#x…

注册讲堂 | 体外诊断试剂分类目录的变化

5月11日&#xff0c;千呼万唤的《体外诊断试剂分类目录》&#xff08;2024年第58号&#xff09;终于发布&#xff01; 前世今生 2013年&#xff1a;《6840 体外诊断试剂分类子目录&#xff08;2013版&#xff09;》&#xff08;以下简称2013版目录&#xff09; 2017年&#xff…

苹果永久版安装PD虚拟机:Parallels Desktop 19 一键激活版

Parallels Desktop 19是一款功能强大的虚拟机软件&#xff0c;专为Mac用户设计&#xff0c;允许用户在同一台Mac电脑上同时运行Windows、Linux等多个操作系统&#xff0c;而无需额外的硬件设备。 下载地址&#xff1a;https://www.macz.com/mac/9581.html?idOTI2NjQ5Jl8mMjcuM…

Kubernetes入门:核心概念

集群架构与组件 一个kubernetes集群主要是由控制节点(master)、工作节点(node)构成&#xff0c;每个节点上都会安装不同的组件。 master&#xff1a;集群的控制平面&#xff0c;负责集群的决策 ( 管理 ) api-server : 资源操作的唯一入口&#xff0c;接收用户输入的命令&…

文本控件Text Control示例: 将图像插入 TX 的各种方法

TX Text Control 是一款功能类似于 MS Word 的文字处理控件&#xff0c;包括文档创建、编辑、打印、邮件合并、格式转换、拆分合并、导入导出、批量生成等功能。广泛应用于企业文档管理&#xff0c;网站内容发布&#xff0c;电子病历中病案模板创建、病历书写、修改历史、连续打…

在Linux上面部署ELK

注明&#xff1a;一下的软件需要自己准备 一、准备环境&#xff1a; 1.两台elasticsearch主机4G内存 2.两台elasticsearch配置主机名node1和node2(可以省略) #vim /etc/hostname #reboot 3. 两台elasticsearch配置hosts文件 #vim /etc/hosts 192.168.1.1 node1 192…