css原子化的框架Tailwindcss的使用教程(原始html和vue项目的安装与配置)

安装教程

中文官网教程

原始的HTML里面使用

  • 新建文件夹
  • npm init -y 初始化项目

安装相关依赖

npm install -D tailwindcss postcss-cli autoprefixer

初始化两个文件

npx tailwindcss init -p

根目录下新建src/style.css

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

tailwind.config.js内增加如下配置

/** @type {import('tailwindcss').Config} */
module.exports = {// purge内代表匹配所有的html文件,即会扫描所有的html文件进行自动生成对应的csspurge: ['./src/**/*.html'],content: [],theme: {extend: {},},plugins: [],
}

package.json新增节点

"scripts":{"watch":"postcss src/style.css -o dist/style.css --watch","build":"postcss src/style.css -o dist/style.css"
}

html引入只需要引入src下面的css文件即可

至此,当我们运行npm run watch之后,html类名有变动则对应的dist/style.css文件内也会增加对应的类

当我们运行npm run build会打包生成dist/style.css

多个类的内容整合成一个类

在html中
<div class='heading'></div>在src/style.css内
新增如下:
.heading{@apply text-9xl text-center text-blue-600 sm:bg-black sm:text-white;
}打包出来dist/style.css的结果为
.heading{font-size:8rem;line-height:1;text-align:center;--te-text-opacity:1;color:rgba(37,99,235,var(--tw-text-opacity))
}
// 后面还有关于heading的响应式,就不写了

vue内使用安装教程

这里使用vite配置

创建项目

npm create vite@latest

安装依赖

npm install  // 先全部安装
npm install -D tailwindcss postcss-cli autoprefixer  // 再安装需要的依赖

初始化两个文件

npx tailwindcss init -p

设置tailwind.config.js文件的目录位置

/** @type {import('tailwindcss').Config} */
export default {// 当以下被匹配到的文件内的类名变化时,会被匹配到,同时会在打包目录下新增类对应的样式purge:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],content: [],theme: {extend: {},},plugins: [],
}

在src下面新增index.css

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

在main.js内引入index.css

import { createApp } from 'vue'
import './index.css'
import App from './App.vue'createApp(App).mount('#app')

编辑App.vue

<script setup>import { ref, reactive } from 'vue';
const count = ref(0);</script><template><div class="text-9xl text-center text-blue-600 sm:block">hello world</div>
</template><style scoped lang="scss"></style>

运行项目

npm run dev

效果图
在这里插入图片描述
具体的类名和样式需要大家去官网查询,这里我推荐的是中文网(因为能看懂)

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

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

相关文章

图神经网络--GNN从入门到精通

图神经网络--GNN从入门到精通 一、图的基本表示和特征工程1.1 什么是图1.2 图的基本表示1.3 图的性质--度&#xff08;degree)1.4 连通图&#xff0c;连通分量1.5有向图连通性1.6图直径1.7度中心性1.7特征中心性&#xff08; Eigenvector Centrality&#xff09;1.8中介中心性 …

CentOS 7 实战指南:目录操作命令详解

写在前面 想要在 CentOS 7 系统下更高效地进行目录操作吗&#xff1f;不要犹豫&#xff0c;在这里我为你准备了一篇精彩的技术文章&#xff01;这篇文章将带您深入了解 CentOS 7 下目录操作相关命令的使用方法。无论您是新手还是有一定经验的用户&#xff0c;这篇文章都将为您…

EasyNTS端口穿透服务新版本发布 0.8.7 增加隧道流量总数记录,可以知晓设备哪个端口耗费流量了

EasyNTS上云平台可通过远程访问内网应用&#xff0c;包含网络桥接、云端运维、视频直播等功能&#xff0c;极大地解决了现场无固定IP、端口不开放、系统权限不开放等问题。平台可提供一站式上云服务&#xff0c;提供直播上云、设备上云、业务上云、运维上云服务&#xff0c;承上…

金蝶云星空其他出库单,审核中/审批流中可以选择序列号设置

文章目录 其他出库单&#xff0c;审核中&#xff0c;审批流中可以选择序列号设置 其他出库单&#xff0c;审核中&#xff0c;审批流中可以选择序列号设置

创建型设计模式 - 抽象工厂模式 - JAVA

创建型设计模式 - 抽象工厂设计模式 一. 简介二. 列子2.1 定义电脑的抽象类和子类2.2 定义抽象工厂类和其实现类2.3 测试 三. 抽象工厂设计模式的好处四. 抽象工厂模式的案例 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续…

如果xm_bmgys的长度大于3就每行五列,否则每行两列

如果需要根据xm_bmgys的长度动态调整表格的列数&#xff0c;可以使用Freemarker的条件判断语句进行处理。 下面是一个更新后的示例代码&#xff1a; <table><#if xm_bmgys?size > 3> <!-- 如果长度大于3&#xff0c;每行五列 --><#list xm_bmgys a…

【mysql】数据处理格式化、转换、判断

数据处理 判断是否超时&#xff0c;时间是否大于当前时间计算分钟数时间格式化处理如果数值类型进行转换字符类型字符拼接case-when代替if-else判断数据空&#xff08;特殊&#xff1a;含空数据、空字符处理&#xff09; select /*判断是否超时&#xff0c;时间是否大于当前…

2024任务驱动Hadoop应用讲课提纲

文章目录 为何采用任务驱动&#xff1f;任务驱动Hadoop应用课程概述项目一&#xff1a;搭建Hadoop集群任务1&#xff1a;搭建完全分布式Hadoop集群1. 思路解析2. 编程实现3. 知识点讲解4. 总结提高 任务2&#xff1a;搭建高可用Hadoop集群&#xff08;HA模式&#xff09;1. 思路…

c++编程大师挑战赛-静夜思

静夜思 暂无标签 题目统计 全部提交 时间限制&#xff1a;C/C 1000MS&#xff0c;其他语言 2000MS 内存限制&#xff1a;C/C 256MB&#xff0c;其他语言 512MB 难度&#xff1a;简单 出题人&#xff1a;admin 描述 请在屏幕上输出《静夜思》&#xff0c;每句诗后单独占据1行…

AI模型私人订制

使用AI可以把你的脸换成明星的脸&#xff0c;可以用于直播、录播。 AI换脸1 也可以把视频中明星的脸换成你的脸 AI换脸2 之所以能够替换成功&#xff0c;是因为我们有一个AI人物模型&#xff0c;AI驱动这个模型就可以在录制视频的时候替换指定人物的脸。AI模型从哪里来&…

题目 1669: 求圆的面积

题目很简单&#xff0c;已知半径r&#xff0c;求一个圆的面积是多大。 圆的面积公式&#xff0c;圆周率Π用Pi表示&#xff0c; R为圆的半径&#xff0c;面积为: SPi*(R^2) 输入格式 输入一个半径&#xff0c;浮点类型~ 输出格式 输出它对应的面积大小&#xff0c;…

快速部署supervisord详解

Supervisor是一个用于监控和管理进程的工具。它可以在Unix-like系统中启动、停止、重启和管理后台进程&#xff0c;确保这些进程始终保持运行状态。 yum check-update 更新yum软件包索引 yum install epel-release -y 下载eprl源 yum install supervisor -y 直接yu…

Linux---进程控制

一、进程创建 fork函数 在Linux中fork函数是非常重要的函数&#xff0c;它从已存在进程中创建一个新进程&#xff0c;原进程为父进程 fork函数的功能&#xff1a; 分配新的内存和内核数据结构给子进程将父进程部分数据结构内容拷贝至子进程添加子进程到系统的进程列表中fork返…

Linux环境编程基础

静态库和动态库 静态库和动态库 在实际开发中&#xff0c;我们把通用的函数和类分文件编写&#xff0c;称之为库。在其它的程序中&#xff0c;可以使用库中的函数和类。 一般来说&#xff0c;通用的函数和类不提供源代码文件&#xff08;安全性、商业机密&#xff09;&#x…

说出Servlet的生命周期,并说出Servlet和CGI的区别

Servlet的生命周期可以概括为三个阶段&#xff1a;初始化阶段、处理请求阶段和销毁阶段。 初始化阶段&#xff1a;Servlet在第一次被加载到Web服务器时&#xff0c;服务器会创建一个Servlet实例。然后服务器调用Servlet的init()方法进行初始化操作。这个方法只会在Servlet第一…

【nodejs】前后端身份认证

前后端身份认证 一、web开发模式 服务器渲染&#xff0c;前后端分离。 不同开发模式下的身份认证&#xff1a; 服务端渲染推荐使用Session认证机制前后端分离推荐使用JWT认证机制 二、session认证机制 1.HTTP协议的无状态性 了解HTTP协议的无状态性是进一步学习Session认…

How to Develop Word Embeddings in Python with Gensim

https://machinelearningmastery.com/develop-word-embeddings-python-gensim/ 本教程分为 6 个部分;他们是&#xff1a; 词嵌入 Gensim 库 开发 Word2Vec 嵌入 可视化单词嵌入 加载 Google 的 Word2Vec 嵌入 加载斯坦福大学的 GloVe 嵌入 词嵌入 单词嵌入是一种提供单词的…

【YOLO系列】yolo V1 ,V3,V5,V8 解释

文章目录 yolo V1 模型结构图通道数 的 物理意义是什么&#xff1f;输出 7730 怎么理解&#xff1f;YOLO v1 损失函数LOSS yolo V3yolo V5yolo V8 视频来源&#xff1a;https://www.bilibili.com/video/BV13K411t7Zs/ AI视频小助理 一、YOLO系列的目标检测算法&#xff0c;其中…

python+opencv实现图片/短视频一键去水印

目录 0 前言1 准备工作2 读取图片或视频3 添加回调获取鼠标绘制水印区域4 调用opencv函数5 绘制蒙版主循环6 去水印主循环总结 0 前言 在制作ppt个人文章或者分享图片过程中&#xff0c;经常会遇到一些带有水印的情况&#xff0c;不少人都希望能够去除这些水印&#xff0c;提高…

2024如何成为一名合格的全栈开发者

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 在当今快速发展的技术环境中&#xff0c;对多才多艺和技能熟练的专业人员的需求正在不断增加。 全栈开发人员是一个非常受欢迎的角色。 本文将深入了解什么是全栈…