tailwindcss学习01

系列教程

01 入门
02 vue中接入

入门

# 注意使用cmd不要powershell
npm init -y
# 如果没有npx则安装
npm install -g npx
npm install -D tailwindcss@3.4.17 --registry http://registry.npm.taobao.org
npx tailwindcss init

在这里插入图片描述
修改tailwind.config.js

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

新建src文件夹,该文件夹下新建input.css

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

执行监听

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

在这里插入图片描述
src下新建index.html

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

在这里插入图片描述

参考

https://www.tailwindcss.cn/docs/installation

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Bert】自然语言(Language Model)入门之---Bert

every blog every motto: Although the world is full of suffering&#xff0c; it is full also of the overcoming of it 0. 前言 对bert进行梳理 论文&#xff1a; BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding 时间&#xff1a;…

ARM64 Trust Firmware [五]

本章介绍 ATF 中的 Runtime Service 是如何定义和被调用的。 要了解 SMC&#xff0c;必须从 SMC 指令本身开始&#xff0c;其指令如下图&#xff1a; 指令格式为&#xff1a;SMC #<imm>&#xff0c;从官方文档了解到该指令只能在 EL1 以及更高的异常等级上调用&#xff…

轻量级5G核心网:适应未来网络需求的关键方案

5G核心网 随着5G技术的迅速普及&#xff0c;网络架构正面临前所未有的变革。传统的5G核心网部署逐渐暴露出在处理大量设备连接、降低运营成本和提升网络灵活性方面的局限性。在这一背景下&#xff0c;轻量级5G核心网&#xff08;Lightweight 5G Core Network&#xff09;成为了…

uniapp uni.request重复请求处理

类似这种切换tab时&#xff0c;如果操作很快并且网络不太好&#xff0c;就出现数据错乱&#xff0c;在网上查了一圈&#xff0c;有一个使用uview拦截处理的&#xff0c;但是原生uni.requse没有找到详细的解决办法&#xff0c;就查到使用 abort 方法&#xff0c;我自己封装了一个…

一周学会Flask3 Python Web开发-http响应状态码

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在Flask程序中&#xff0c;客户端发出的请求触发相应的视图函数&#xff0c;获取返回值会作为响应的主体&#xff0c;最后生成…

FastGPT及大模型API(Docker)私有化部署指南

​​欢迎关注【AI技术开发者】 ​ 经过优化&#xff0c;在不影响FastGPT功能的情况下&#xff0c;大幅降低了部署的设备配置要求&#xff0c;仅需1c1h即可正常部署使用。 官方要求配置&#xff1a; ​ ​ 优化后的实际占用情况&#xff1a; 运行内存仅需370M&#xff08…

个人博客5年回顾

https://huangtao01.github.io/ 五年前&#xff0c;看程序羊的b站视频做的blog&#xff0c;受限于网络&#xff0c;只能单向学习&#xff0c;没有人指导与监督&#xff0c;从来没有想过&#xff0c;有没有什么问题&#xff1f; 一、为什么要做个人博客&#xff1f; 二、我是怎么…

11.编写前端内容|vscode链接Linux|html|css|js(C++)

vscode链接服务器 安装VScode插件 Chinese (Simplified) (简体中⽂) Language Pack for Visual Studio CodeOpen in BrowserRemote SSH 在命令行输入 remote-ssh接着输入 打开配置文件&#xff0c;已经配置好主机 点击远程资源管理器可以找到 右键链接 输入密码 …

DeepSeek R1生成图片总结2(虽然本身是不能直接生成图片,但是可以想办法利用别的工具一起实现)

DeepSeek官网 目前阶段&#xff0c;DeepSeek R1是不能直接生成图片的&#xff0c;但可以通过优化文本后转换为SVG或HTML代码&#xff0c;再保存为图片。另外&#xff0c;Janus-Pro是DeepSeek的多模态模型&#xff0c;支持文生图&#xff0c;但需要本地部署或者使用第三方工具。…

【达梦数据库】dblink连接[SqlServer/Mysql]报错处理

目录 背景问题1&#xff1a;无法测试以ODBC数据源方式访问的外部链接!问题分析&原因解决方法 问题2&#xff1a;DBLINK连接丢失问题分析&原因解决方法 问题3&#xff1a;DBIINK远程服务器获取对象[xxx]失败,错误洋情[[FreeTDS][SQL Server]Could not find stored proce…

【从0做项目】Java搜索引擎(4)——性能优化~烧脑~~~

本篇文章将对项目搜索引擎&#xff08;1&#xff09;~&#xff08;3&#xff09;进行性能优化&#xff0c;包括测试&#xff0c;优化思路&#xff0c;优化前后对比 目录 一&#xff1a;文件读取 二&#xff1a;实现多线程制作索引 1&#xff1a;代码分析 2&#xff1a;代码…

YOLOv12推理详解及部署实现

目录 前言一、YOLOv12推理(Python)1. YOLOv12预测2. YOLOv12预处理3. YOLOv12后处理4. YOLOv12推理 二、YOLOv12推理(C)1. ONNX导出2. YOLOv12预处理3. YOLOv12后处理4. YOLOv12推理 三、YOLOv12部署1. 源码下载2. 环境配置2.1 配置CMakeLists.txt2.2 配置Makefile 3. ONNX导出…

在VS-qt的程序中,后期增加PCH预编译功能,提高编译速度

由于前期创建qt程序的时候未勾选pch功能,导致没有启动预编译的功能. 这种情况下需要增加pch功能应该怎么做? 在项目中增加2个文件 stdafx.h和stdafx.cpp文件 stdafx.h增加qt常用头文件 #pragma once //windows #include <windows.h>//qt常用 #include <QObject&g…

校园网架构设计与部署实战

一、学习目标 掌握校园网分层架构设计原则 理解多业务VLAN规划方法 学会部署认证计费系统 实现基础网络安全防护 二、典型校园网场景 需求分析&#xff1a;某中学需建设新型校园网络 覆盖教学楼/宿舍/图书馆三区域 区分教师/学生/访客网络权限 满足2000终端并发接入 …

阐解WiFi信号强度

WiFi信号强度是指无线网络信号的强度&#xff0c;通常以负数dB&#xff08;分贝&#xff09;来表示。信号越强&#xff0c;dB值越接近零。WiFi信号强度直接影响你的网络速度、稳定性和连接的可靠性。简单来说&#xff0c;WiFi信号越强&#xff0c;你的设备与路由器之间的数据传…

【Quest开发】全身跟踪

软件&#xff1a;Unity 2022.3.51f1c1、vscode、Meta XR All in One SDK V72 硬件&#xff1a;Meta Quest3 最终效果&#xff1a;能像meta的操作室沉浸场景一样根据头盔移动来推断用户姿势&#xff0c;实现走路、蹲下、手势匹配等功能 需要借助UnityMovement这个包 GitHub …

用Chrome Recorder轻松完成自动化测试脚本录制

前言 入门自动化测试,录制回放通常是小白测试首先用到的功能。而录制回放工具也一直是各大Web自动化测试必然会着重提供的一块功能。 早期WinRunner、QTP这样的工具,自动化测试可以说是围绕录制回放开展的。近年像Selenium也提供有录制工具 Selenium IDE,Playwright也包含…

延迟任务的11种实现方式(下)!!

接上文&#xff1a; Redisson的RDelayedQueue Redisson他是Redis的儿子&#xff08;Redis son&#xff09;&#xff0c;基于Redis实现了非常多的功能&#xff0c;其中最常使用的就是Redis分布式锁的实现&#xff0c;但是除了实现Redis分布式锁之外&#xff0c;它还实现了延迟…

大型语言模型训练与优化实战指南(2025最新版)

一、大模型训练四部曲 1.1 预训练&#xff1a;构建语言理解的基石 预训练是模型获取通用语言能力的核心阶段&#xff0c;主流方法包括&#xff1a; 自回归生成&#xff08;如GPT系列&#xff09;&#xff1a;预测下一个词&#xff0c;参数规模可达1.8T掩码语言建模&#xff…

【前端】使用WebStorm创建第一个项目

文章目录 前言一、步骤1、启动2、创建项目3、配置Node.js4、运行项目 二、Node.js介绍 前言 根据前面文章中记录的步骤&#xff0c;已经安装好了WebStorm开发软件&#xff0c;接下来我们就用这个IDE开发软件创建第一个项目。 一、步骤 1、启动 启动软件。 2、创建项目 新建…