当前位置： 首页 > news >正文

Tailwind CSS 使用简介

news 2026/1/17 18:57:37

参考网站安装 - Tailwind CSS 中文网 

号称是开始使用 Tailwind CSS

通过 npm 安装 tailwindcss，并创建你的 tailwind.config.js 文件。

npm install -D tailwindcss
npx tailwindcss init

在 tailwind.config.js 文件中添加所有模板文件的路径。

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

 将 Tailwind 指令添加到你的 CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
启动 Tailwind CLI 构建进程

运行 CLI 工具以扫描模板文件中的类并构建 CSS。

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
开始在你的 HTML 中使用 Tailwind

将已编译的 CSS 文件添加到 <head> 并开始使用 Tailwind 的工具类来设置内容的样式。

<!doctype html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="./output.css" rel="stylesheet">
</head>
<body><h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>

相关文章：

Tailwind CSS 使用简介

参考网站安装 - Tailwind CSS 中文网 号称是开始使用 Tailwind CSS 通过 npm 安装 tailwindcss&#xff0c;并创建你的 tailwind.config.js 文件。 npm install -D tailwindcss npx tailwindcss init 在 tailwind.config.js 文件中添加所有模板文件的路径。 /** type {im…...

编程日记 2025/1/5 18:46:34

iOS 逆向学习 - iOS Architecture Cocoa Touch Layer

iOS 逆向学习 - iOS Architecture Cocoa Touch Layer 一、Cocoa Touch Layer 简介二、Cocoa Touch Layer 的核心功能1. UIKit2. Event Handling&#xff08;事件处理&#xff09;3. Multitasking&#xff08;多任务处理&#xff09;4. Push Notifications&#xff08;推送通知&…...

编程日记 2025/1/5 18:45:33

C语言实现库函数strlen

size_t是 unsigned int fgets会读入\n&#xff0c;用strcspn函数除去 assert判读指针是否为空指针&#xff0c;使用前要引头文件<assert.h> #include <stdio.h> #include <assert.h> size_t mystrlen(const char* str) {assert(str);size_t count 0;while …...

编程日记 2025/1/5 18:40:18

050_小驰私房菜_MTK Camera debug, data rate 、mipi_pixel_rate 确认

mipi_pixel_rate = data rate * 4 / 10 (4 是表示4lane,10表示raw数据是10bit) mipi_pixel_rate 信息，我们可以通过 sentest命令打印看到： 下面的信息我们可以看到，mipi_pixel_rate = 501.357739Mpps，mipi rate = 10000000，是对应的我们驱动文件里面配置写的mipi_pixel_r…...

编程日记 2025/1/5 18:39:16

（六）vForm 动态表单（数据量大，下拉选卡顿问题）

系列文章目录 （一）vForm 动态表单设计器之使用 （二）vForm 动态表单设计器之下拉、选择 （三）vForm 动态表单解决下拉框无数据显示id问题 （四）vForm 动态表单自定义组件、属性 （五）vForm 动态表单文件上传、下载 文章目录 目录 前言 一、组件改造 1.添加分页所需参…...

编程日记 2025/1/5 18:36:13

【mybatis-plus问题集锦系列】mybatis使用xml配置文件实现数据的基础增删改查

简单的数据查询&#xff0c;我们可以在mapper接口里面去实现&#xff0c;但是如果是复杂的查询&#xff0c;我们就可以使用xml配置文件去做&#xff0c; 官网链接xml配置文件 实现效果 实现代码 根据mapper接口的包结构&#xff0c;在resources包里面新建同名同结构的xml文件…...

编程日记 2025/1/5 18:33:07

投稿指南【NO.12_14】【极易投中】期刊投稿（毛纺科技）

近期有不少同学咨询投稿期刊的问题&#xff0c;大部分院校的研究生都有发学术论文的要求&#xff0c;少部分要求高的甚至需要SCI或者多篇核心期刊论文才可以毕业&#xff0c;但是核心期刊要求论文质量高且审稿周期长&#xff0c;所以本博客梳理一些计算机特别是人工智能相关的期…...

编程日记 2025/1/5 18:32:05

机器学习算法的分类

一、按学习方式分类 1.监督学习&#xff08;Supervised Learning&#xff09; &#xff08;1&#xff09;定义&#xff1a;使用已标记的数据进行训练&#xff0c;每个输入数据都有对应的输出标签。模型学习输入与输出之间的映射关系。 按以上可以分为以下两种&#xff1a; …...

编程日记 2025/1/5 18:27:01

Linux操作系统下，挂ILA

一、在linux下安装vivado2018.3 参考视频&#xff1a;Linux下vivado安装教程_哔哩哔哩_bilibili 复制安装包进入虚拟机 安装包链接&#xff1a;https://pan.quark.cn/s/ca1a15d446fa 我的vmware tools无法使用&#xff0c;不能直接拖进虚拟机&#xff0c;所以使用了U盘复制…...

编程日记 2025/1/5 18:25:59

HTML——26.像素单位

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>像素</title></head><body><!--像素&#xff1a;1.指设备屏幕上的一个点&#xff0c;单位px&#xff0c;如led屏上的小灯朱2.当屏幕分辨率固定时&…...

编程日记 2025/1/5 18:23:58

【HTML】Day02

【HTML】Day02 1. 列表标签1.1 无序列表1.2 有序列表1.3 定义列表 2. 表格标签2.1 合并单元格 3. 表单标签3.1 input标签基本使用3.2 上传多个文件 4. 下拉菜单、文本域5. label标签6. 按钮button7. div与span、字符实体字符实体 1. 列表标签 作用&#xff1a;布局内容排列整齐…...

编程日记 2025/1/5 18:20:53

AI 自动化编程对编程教育的影响

AI 自动化编程的未来 引言 你是否曾想过&#xff0c;未来的程序员需要掌握哪些技能呢&#xff1f;随着人工智能的迅猛发展&#xff0c;特别是生成式AI工具的普及&#xff0c;编程的世界正在发生翻天覆地的变化。编程教育也在这种环境下进行着深刻的转型。那么&#xff0c;AI …...

编程日记 2025/1/5 18:12:45

Java100道面试题

1.JVM内存结构 VM内存结构指的是JVM运行时数据区结构&#xff0c;它主要包含以下几个部分&#xff1a; 堆&#xff08;Heap&#xff09;&#xff1a;线程共享。 JVM堆&#xff08;Heap&#xff09;是Java虚拟机中的一块内存区域&#xff08;所有线程共享&#xff09;&#x…...

编程日记 2025/1/5 18:09:41

解密人工智能：如何改变我们的工作与生活

引言&#xff1a;AI崛起背后的思考 在过去的几十年里&#xff0c;人工智能&#xff08;AI&#xff09;从科幻小说中的神秘存在&#xff0c;逐渐走进了我们的日常生活。无论是智能手机的语音助手&#xff0c;还是推荐心仪商品的电商平台&#xff0c;AI技术已悄然融入工作与生活的…...

编程日记 2025/1/5 18:07:39

Linux postgresql-15部署文档

一、PostgreSQL的安装 1、下载地址 postgresql安装包下载地址&#xff1a;https://www.postgresql.org/download/linux/redhat/ 2、安装脚本 复制下面的安装脚本即可&#xff1a; sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64…...

编程日记 2025/1/5 18:06:34

visual studio 安全模式

一、安全模式&#xff1a; 在 Visual Studio 中&#xff0c;安全模式是一种启动方式&#xff0c;允许你在禁用所有扩展和自定义设置的情况下启动 Visual Studio。这个模式可以帮助排除插件或扩展引起的问题&#xff0c;特别是在 Visual Studio 无法正常启动时。 二、安全模式下…...

编程日记 2025/1/5 18:05:32

Pandas-timestamp和datetime64的区别

文章目录 1. Timestamp&#xff08;时间戳&#xff09;2. Datetime64&#xff08;日期时间64位&#xff09;3. 主要区别&#xff1a; pandas.Timestamp 和 pandas.Datetime64 都是用于表示日期和时间的 Pandas 对象&#xff0c;但它们有一些关键的区别&#xff1a; 1. Timesta…...

编程日记 2025/1/5 18:03:30

@MapperScan

简介&#xff1a; MapperScan注解是MyBatis框架在Spring Boot中的一个重要集成注解 作用&#xff1a; MapperScan主要作用是告诉Spring框架在启动时扫描指定的包路径&#xff0c;并将该路径下的所有MyBatis的Mapper接口批量注入到Spring容器中。这样&#xff0c;开发者就可以…...

编程日记 2025/1/5 18:01:26

SQL中聚类后字段数据串联字符串方法研究

在 SQL 中&#xff0c;使用 聚类&#xff08;GROUP BY&#xff09; 后将某个字段的数据串联为一个字符串&#xff0c;常见的方法包括以下几种&#xff0c;取决于数据库管理系统&#xff08;DBMS&#xff09;的具体支持功能&#xff1a; 1. 使用 GROUP_CONCAT &#xff08;MySQL…...

编程日记 2025/1/5 17:59:24

【嵌入式硬件】直流电机驱动相关

项目场景&#xff1a; 驱动履带车&#xff08;双直流电机&#xff09;前进、后退、转弯 问题描述 电机驱动MOS管烧毁 电机驱动采用IR2104STRH1R403NL的H桥方案&#xff08;这是修改之后的图&#xff09; 原因分析&#xff1a; 1.主要原因是4路PWM没有限幅&#xff0c;修改…...

编程日记 2025/1/5 17:57:20

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/1/15 5:27:41

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2026/1/15 4:24:33

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/15 6:21:10

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/1/15 11:19:09

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/1/15 4:58:14

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/1/16 17:43:27

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41