在React项目中试用Tailwind

TailwindCSS

TailwindCSS 是一个套 CSS 的工具类,把常用的功能都进行了定义,下面是一个官网的例子,可以看到Tailwind对一元页面素写了很多类,日常开发中只要定义一两个类就可以搞定类似的功能了。这里写了这么多 p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4,那么用 tailwind 有什么好处呢,官网给出的好处包括以下几点:

  1. 你不再浪费精力去起类名。不需要再添加像是 sidebar-inner-wrapper 这样的愚蠢类名来实现样式设置,也不需要为某个实际上只是一个弹性容器的东西苦恼于找一个完美的抽象名字。
  2. 你的 CSS停止增长。使用传统方法时,每增加一个新功能,你的 CSS 文件就会变大。使用工具类,一切都是可重用的,所以你很少需要编写新的 CSS。
  3. 做出改变感觉更安全。CSS 是全局的,你永远不知道当你做出改变时会破坏什么。而你的 HTML中的类是局部的,所以你可以更改它们而不用担心其他东西会出问题。
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4"><div class="shrink-0"><img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo"></div><div><div class="text-xl font-medium text-black">ChitChat</div><p class="text-slate-500">You have a new message!</p></div>
</div>

我觉得这个库用起来门槛不高,就是需要知道那些工具类名是什么意思,例如上面这段代码,p-6 是什么意思,我把主要的一些工具类型列出来了,可以参考一下。

Tailwind CSS 类前缀

Tailwind CSS 使用不同的类前缀来表示各种样式工具。以下是一些常用的类前缀列表:

间距控制

  • Padding (p-): 控制元素的内边距。

    • p- (所有边)
    • px- (左右)
    • py- (上下)
    • pt- (顶部)
    • pr- (右侧)
    • pb- (底部)
    • pl- (左侧)
  • Margin (m-): 控制元素的外边距。

    • m- (所有边)
    • mx- (左右)
    • my- (上下)
    • mt- (顶部)
    • mr- (右侧)
    • mb- (底部)
    • ml- (左侧)

尺寸控制

  • Width (w-): 控制元素的宽度。
  • Min-width (min-w-): 控制元素的最小宽度。
  • Max-width (max-w-): 控制元素的最大宽度。
  • Height (h-): 控制元素的高度。
  • Min-height (min-h-): 控制元素的最小高度。
  • Max-height (max-h-): 控制元素的最大高度。

字体与文本

  • Font Size (text-): 调整字体大小。
  • Font Weight (font-): 设置字体粗细。
  • Text Alignment (text-): 文本对齐。
    • text-left, text-center, text-right, text-justify
  • Text Color (text-): 设置文本颜色。
  • Text Decoration (underline, line-through): 文本装饰。

背景

  • Background Color (bg-): 设置背景颜色。
  • Background Image (bg-): 应用背景图像。

边框

  • Border (border-): 设置边框。
  • Border Radius (rounded-): 控制边角圆润度。
  • Border Color (border-): 设置边框颜色。

布局

  • Display (block, inline-block, inline, flex, grid): 控制元素的显示方式。
  • Position (relative, absolute, fixed, sticky): 元素定位。
  • Overflow (overflow-): 控制内容溢出。
  • Z-index (z-): 控制元素的层叠顺序。

弹性盒模型

  • Flex Direction (flex-): 设置 flex 容器的主轴方向。
  • Flex Wrap (flex-): 设置 flex 容器的换行方式。
  • Align Items (items-): 控制交叉轴上的对齐方式。
  • Justify Content (justify-): 控制主轴上的对齐方式。

网格布局

  • Grid Template Columns (grid-cols-): 定义网格列的数量和大小。
  • Grid Column (col-): 控制元素在网格列中的位置和跨度。
  • Grid Gap (gap-): 设置网格线之间的间隙。

动效

  • Transition (transition-): 应用过渡效果。
  • Transform (scale-, rotate-, translate-): 使用变换效果。
  • Animation (animate-): 应用动画效果。

其他

  • Opacity (opacity-): 控制透明度。
  • Visibility (visible, invisible): 控制元素的可见性。

Tailwind CSS 配置

Tailwind 可以自定义主题,例如,padding 的1 个单位是多少,可以根据公司的 UI 规范进行定义。

  • colors: 定义颜色调色板。
  • spacing: 设置自定义间距值(填充、边距、间隙)。
  • screens: 配置响应式断点。
  • fontSize: 设置字体大小比例。
  • fontWeight: 自定义字体粗细选项。
  • borderWidth: 设置边框宽度大小。
  • borderRadius: 自定义边框圆角大小。
  • height/width: 定义特定的高度和宽度比例。
  • minHeight/minWidth/maxHeight/maxWidth: 设置最小和最大尺寸。

在React项目安装 Tailwind

创建项目

npx create-react-app my-tail-project
cd my-tail-project

初始化TailwindCSS

以下命令会生成tailwind.config.js

npm install -D tailwindcss
npx tailwindcss init

修改配置文件

将React 源文件名称,加入到 content 配置项中。


tailwind.config.js/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{js,jsx,ts,tsx}",],theme: {extend: {},},plugins: [],
}

在index.css中加入 tailwind 相关配置

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

启动项目

npm run start

修改 App.js 进行测试

export default function App() {return (<h1 className="text-3xl font-bold underline">Hello world!</h1>)
}

vscode 中添加插件

有个这个插件,写代码就有智能提示了。
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

java导出数据到excel表中

java导出数据到excel表中 环境说明项目结构1.controller层2.service层3.实现层4.工具类&#xff1a;ExcelUtil.java5.ProductModel.java类 使用的Maven依赖postman请求展示&#xff0c;返回内容需要前端接收浏览器接收说明&#xff08;如果下载下来的为zip类型&#xff0c;记得…

C语言读取数据检索存档《C语言程序设计》·第6章·用数组处理批量数据

C数组使用 添加链接描述 C语言读取数据检索存档 1 添加链接描述 2 添加链接描述 3 添加链接描述 4 添加链接描述 5 添加链接描述 6 添加链接描述 7 matlab转C 添加链接描述

【从浅学到熟知Linux】基础IO第三弹=>文件系统介绍、软链接与硬链接(含磁盘结构、文件系统存储原理、软硬链接的创建、原理及应用详解)

&#x1f3e0;关于专栏&#xff1a;Linux的浅学到熟知专栏用于记录Linux系统编程、网络编程等内容。 &#x1f3af;每天努力一点点&#xff0c;技术变化看得见 文章目录 理解文件系统物理角度认识磁盘逻辑角度认识磁盘磁盘寻址磁盘中的寄存器 磁盘存储管理 软链接与硬链接软链接…

NVIDIA安装程序失败-Nsight Visual Studio Edition失败解决办法

博主是要升级cuda版本&#xff0c;那么在安装新版本之前需要卸载以前的版本。 博主一溜卸载下去&#xff0c;最后有这么个东西卸载不掉&#xff0c;Nsight Visual Studio Edition 不管是电脑系统卸载还是360卸载&#xff0c;都卸载不掉。 此时安装新的cuda也遇到了这个问题 由…

PF滤波?

粒子滤波 本文是对于原文的学习与部分的转载 https://blog.csdn.net/weixin_44044161/article/details/125445579 粒子滤波是在目标跟踪中常用的一种方法 非线性条件下&#xff0c;贝叶斯滤波面临一个重要的问题是状态分布的表达与积分式的求解 由前面章节中的分析可以得知…

拓展网络技能:利用lua-http库下载www.linkedin.com信息的方法

引言 在当今的数字时代&#xff0c;网络技能的重要性日益凸显。本文将介绍如何使用Lua语言和lua-http库来下载和提取LinkedIn网站的信息&#xff0c;这是一种扩展网络技能的有效方法。 背景介绍 在当今科技潮流中&#xff0c;Lua语言以其轻量级和高效的特性&#xff0c;不仅…

后端-MySQL-week11 事务

事务 简介 操作 有两种方式&#xff0c;一种是设置为手动提交——不执行“commit”不进行变更&#xff1b;另一种是手动开启一个事务&#xff0c;用开启事务的代码&#xff08;SQL语句&#xff09;来创建一个需要“commit”才能进行变更的事务 1.第一种方式 2.第二种方式 四…

线性代数基础3 行列式

行列式 行列式其实在机器学习中用的并不多&#xff0c;一个矩阵必须是方阵&#xff0c;才能计算它的行列式 行列式是把矩阵变成一个标量 import numpy as np A np.array([[1,3],[2,5]]) display(A) print(矩阵A的行列式是&#xff1a;\n,np.linalg.det(A))array([[1, 3],[2, …

Postman之全局变量与环境变量配置

实际开发中可能需要不停切换环境&#xff0c;接口中来回输入环境地址比较麻烦&#xff0c;故而通过定义变量来节约频繁更换测试地址所耗费的时间。Postman 允许定义自己的全局变量&#xff08;Globals&#xff09;与环境变量&#xff08;Environment&#xff09;&#xff0c;最…

Vue 指令、计算属性、侦听器

目录 指令 指令修饰符 按键修饰符 ​编辑 v-model修饰符 事件修饰符 v-bind对于样式操作的增强 操作class 对象 数组 操作style v-model应用于其他表单元素 computed计算属性 概念 基础语法 ​编辑 计算属性vs方法 computed计算属性 作用 语法 缓存特性 m…

对接浦发银行支付(五)-- 主动查询支付结果

一、背景 上一篇我们介绍了支付回调接口的对接情况&#xff0c;当回调出现网络等异常情况&#xff0c;导致用户的支付订单未及时处理或处理失败的时候&#xff0c;商户则需要自己主动向浦发银行发起查询支付结果。 主动查询支付结果&#xff0c;发挥补偿重试的重要作用&#x…

使用PHP开发体育赛事直播平台,有这些缺点和优点

"东莞梦幻网络科技"作为体育直播平台开发领域的领导者&#xff0c;选择使用PHP开发体育赛事直播平台的现成源码&#xff0c;为什么会选择该语言&#xff0c;背后的选择理由可以从该技术的优点和缺点中找到答案。 一、优点1、易学易用与快速开发&#xff1a;PHP语言语…

HTML的学习-通过创建相册WEB学习HTML-第一部分

文章目录 一、设置中文1.1、添加中文插件1.2、配置显示中文语言 二、学习开始2.1、创建项目文件夹2.2、h1标签示例&#xff1a;生成HTML框架示例&#xff1a;添加h1标签 2.3、h2标签示例&#xff1a;在h1标签下添加h2标签 2.4、h1标签到h6标签层次解析2.5、p标签示例&#xff1…

怎么把网页上的文字变小?

以下是针对常见浏览器的说明&#xff1a; ### Google Chrome&#xff1a; 1. 打开 Chrome 浏览器并导航到您想要调整文字大小的网页。 2. 在页面上右键单击空白处&#xff0c;然后选择 "检查" 或按下 CtrlShiftI&#xff08;在 Windows 或 Linux 上&#xff09;或 Co…

Spark-机器学习(3)回归学习之线性回归

在之前的文章中&#xff0c;我们了解我们的机器学习&#xff0c;了解我们spark机器学习中的特征提取和我们的tf-idf&#xff0c;word2vec算法。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你…

STL-vector类的使用及其模拟实现

在C中&#xff0c;vector是标准模板库&#xff08;STL&#xff09;中的一种动态数组容器&#xff0c;它可以存储任意类型的元素&#xff0c;并且能够自动调整大小。vector提供了许多方便的成员函数&#xff0c;使得对数组的操作更加简单和高效。 vector的使用 vector的构造函数…

机器学习-聚类算法

简介 本文主要内容&#xff1a; 聚类分析所涉及到的所有方面 和 经典划分聚类&#xff1a;K-means算法及其在python中的运用实例 补充介绍的内容包括&#xff1a;sklearn.datasets numpy.ndarray sklearn.cluster matplotlib.pyplot.scatter 聚类分析概述 聚类分析是无监督…

第23天:安全开发-PHP应用后台模块SessionCookieToken身份验证唯一性

第二十三天 一、PHP后台身份验证模块实现 二、Cookie&Session技术&差异 1.生成cookie的原理图过程&#xff1a;见上图 客户端向服务器发送HTTP请求。服务器检查请求头中是否包含cookie信息。如果请求头中包含cookie信息&#xff0c;则服务器使用该cookie来识别客户端…

ICLR 2024 | FTS-Diffusion: 用于合成具有不规则和尺度不变模式的金融时间序列的生成框架

ICLR 2024 | FTS-Diffusion: 用于合成具有不规则和尺度不变模式的金融时间序列的生成框架 原创 QuantML QuantML 2024-04-17 09:53 上海 Content 本文提出了一个名为FTS-Diffusion的新颖生成框架&#xff0c;用于模拟金融时间序列中的不规则和尺度不变模式。这些模式由于其独…

C++三大特性之一:继承

文章目录 前言一、继承方式二、继承类型继承中构造和析构的顺序继承中的内存分配多继承语法(非重点)继承中同名静态成员的处理继承一般在哪里用到进阶&#xff1a;菱形继承和虚拟继承 总结 前言 C三大特性&#xff1a;继承、多态和封装。继承是面向对象编程的一个核心概念&…