Tailwindcss 入门 v4.1

news2025/4/22 4:24:55

以 react 为例,步骤如下:

  1. npm create vite@latest my-app -- --template react 选择 React 和 JavaScript

  2. 根据上述命令的输出提示,运行以下命令
    cd my-app
    npm install
    npm run dev
    一个 React App 初始化完成。

  3. 安装 Tailwindcss
    (https://tailwindcss.com/docs/installation/using-vite):

  4. @theme 的使用(非必须,仅测试),App.css

@import "tailwindcss";

@theme {
  --color-twitter-blue: #1da1f2;
}

但是这里会出现 unknownAtRules 的警告,解决办法:

vs code 按 Ctrl + Shift + P 打开
就是在 .vscode 中自动打开的空白setting.json 中加上以上代码就行,可消除警告。

  1. 测试 Tailwind,App.jsx 代码如下, m 用于设置 margin,p 可用于设置 padding, 很多都与 bootstrap 相似。
import React from "react";
import "./App.css"

const App = () => {
  return (
    <div>
      <section>
        <p className="bg-twitter-blue m-20 text-7xl">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quod
          iste maxime cum tempore, deserunt ea esse molestiae eos temporibus
          molestias, alias officiis, blanditiis enim. Magnam magni enim pariatur
          cupiditate?
        </p>
      </section>
    </div>
  );
};

export default App;

运行结果:

在这里插入图片描述

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

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

相关文章

【Linux】NAT、代理服务、内网穿透

NAT、代理服务、内网穿透 一. NAT1. NAT 技术2. NAT IP 转换过程3. NAPT 技术4. NAT 技术的缺陷 二. 代理服务器1. 正向代理2. 反向代理3. NAT 和代理服务器 内网穿透内网打洞 一. NAT NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;技术&a…

PCA——主成分分析数学原理及代码

主成分分析 PCA的目的是&#xff1a;对数据进行一个线性变换&#xff0c;在最大程度保留原始信息的前提下去除数据中彼此相关的信息。反映在变量上就是说&#xff0c;对所有的变量进行一个线性变换&#xff0c;使得变换后得到的变量彼此之间不相关&#xff0c;并且是所有可能的…

【技术派后端篇】Redis实现统计计数

在互联网项目中&#xff0c;计数器有着广泛的应用场景。以技术派项目为例&#xff0c;诸如文章点赞数、收藏数、评论数以及用户粉丝数等都离不开计数器的支持。在技术派源码中&#xff0c;提供了基于数据库操作记录实时更新和基于 Redis 的 incr 特性实现计数器这两种方案&…

JavaWeb 课堂笔记 —— 16 MyBatis 动态SQL

本系列为笔者学习JavaWeb的课堂笔记&#xff0c;视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程&#xff0c;实现javaweb企业开发全流程&#xff08;涵盖SpringMyBatisSpringMVCSpringBoot等&#xff09;》&#xff0c;章节分布参考视频教程&#xff0c;为同样学习…

Deepseek输出的内容如何直接转化为word文件?

我们有时候会直接利用deepseek翻译别人的文章或者想将deepseek输出的内容直接复制到word文档里。但是文本格式和word是不对应的。这时候需要输入如下命令&#xff1a; 以上翻译内容的格式和排版要求如下&#xff1a; 1、一级标题 字体为黑体&#xff08;三号&#xff09;&…

AI融合SEO关键词实战指南

内容概要 随着人工智能技术的迭代升级&#xff0c;SEO关键词策略正经历从人工经验驱动向数据智能驱动的范式转变。本指南聚焦AI技术在搜索引擎优化中的系统性应用&#xff0c;通过构建多层技术框架实现关键词全生命周期管理。核心方法论涵盖语义分析引擎的构建原理、基于NLP的…

快速入手-基于python和opencv的人脸检测

1、安装库 pip install opencv-python 如果下载比较卡的话&#xff0c;指向国内下载地址&#xff1a; pip3 install opencv-python -i https://pypi.tuna.tsinghua.edu.cn/simple 2、下载源码 https://opencv.org/ windows11对应的版本下载&#xff1a; https://pan.baidu…

汽车免拆诊断案例 | 2011款雪铁龙世嘉车刮水器偶尔自动工作

故障现象 一辆2011款雪铁龙世嘉车&#xff0c;搭载1.6 L 发动机&#xff0c;累计行驶里程约为19.8万km。车主反映&#xff0c;该车刮水器偶尔会自动工作&#xff0c;且前照灯偶尔会自动点亮。 故障诊断 接车后试车发现&#xff0c;除了上述故障现象以外&#xff0c;当用遥控器…

8.QT-按钮类控件|Push Button|Radio Button|Check Box|Tool Button(C++)

Push Button 使⽤ QPushButton 表⽰⼀个按钮.这也是当前我们最熟悉的⼀个控件了. QPushButton 继承⾃ QAbstractButton .这个类是⼀个抽象类.是其他按钮的⽗类 在Qt Designer中也能够看到这⾥的继承关系 属性说明text按钮中的⽂本icon按钮中的图标iconSize按钮中图标的尺⼨sh…

STM32嵌入式

一、创建工程项目 1、进入软件首页 2、新建项目,【file】->【new project】 3、选择需要的芯片 4、系统内核部分设置 ① 选择晶振&#xff08;使用外部的高速晶振&#xff09; ② 选择debug形式&#xff08;SW类型&#xff09; 5、时钟设置 6、选择自己需要的引脚设置&a…

Transformer系列(一):NLP中放弃使用循环神经网络架构

NLP中放弃使用循环神经网络架构 一、符号表示与概念基础二、循环神经网络1. 依赖序列索引存在的并行计算问题2. 线性交互距离 三、总结 该系列笔记阐述了自然语言处理&#xff08;NLP&#xff09;中不再采用循环架构&#xff08;recurrent architectures&#xff09;的原因&…

9.QT-显示类控件|Label|显示不同格式的文本|显示图片|文本对齐|自动换行|缩进|边距|设置伙伴(C++)

Label QLabel 可以⽤来显⽰⽂本和图⽚ 属性说明textQLabel中的⽂本textFormat⽂本的格式.• Qt::PlainText 纯⽂本• Qt::RichText 富⽂本(⽀持html标签)• Qt::MarkdownText markdown格式• Qt::AutoText 根据⽂本内容⾃动决定⽂本格式pixmapQLabel 内部包含的图⽚.scaledCo…

【c语言】深入理解指针1

深入理解指针1 一、数组名的理解二、使用指针访问数组三、一维数组传参本质四、二级指针 一、数组名的理解 数组名就是数组首元素的地址&#xff0c;类型是指针类型&#xff0c;但是存在两个例外&#xff1a; sizeof(arr) : 整个数组在内存中的大小 &arr : 整个数组的地址…

4.QT-信号和槽|存在意义|信号和槽的连接方式|信号和槽断开|lambda表达式|信号和槽优缺点(C++)

信号和槽存在意义 所谓的信号槽&#xff0c;终究要解决的问题&#xff0c;就是响应用户的操作 信号槽&#xff0c;其实在GUI开发的各种框架中&#xff0c;是一个比较有特色的存在 其他的GUI开发框架&#xff0c;搞的方式都要更简洁一些&#xff5e;~ 网页开发 (js dom api) 网…

单元测试的一般步骤

Qt Test Qt Test 是 Qt 开发人员发布的一个单元测试框架&#xff0c;用于测试基于 Qt 框架的应用程序或库。它提供了单元测试框架中常见的所有功能以及用于测试图形用户界面的扩展。 1.自动化测试包络ui测试>接口测试>单元测试&#xff1b;现问如何使用Qt进行单元测试&…

UE5 渲染视频

文章目录 概述插件开始渲染渲染透明背景的视频 概述 渲染视频需要使用关卡序列 渲染原理就是将一个关卡序列渲染为序列帧 序列帧放到AE里会自动变成视频 UE版本是5.4.4 插件 首先开启新的渲染插件&#xff0c;否则会自动使用旧的渲染插件 插件里搜Render&#xff0c;开启这…

pycharm无法识别到本地python的conda环境解决方法

问题一 现象描述&#xff1a; 本地已经安装了conda&#xff0c;但在pycharm中选择conda环境却识别不到&#xff0c; 解决方法&#xff1a;手动输入conda path&#xff0c;点击R eload environments基本就能修复&#xff0c;比如我的路径如下 /Users/test/conda/miniconda3/b…

LFM调制信号分类与检测识别

LFM调制信号分类与检测识别 LFM调制信号分类识别AlexNet网络识别InceptionV3、ResNet-18、ResNet-50网络识别 LFM调制信号检测识别 LFM调制信号分类识别 支持识别LFM信号、间歇采样干扰(ISRJ)、灵巧噪声干扰(SNJ)、扫频干扰(SJ)、瞄准干扰(AJ)、阻塞干扰(BJ)、密集假目标干扰(…

头歌实训之连接查询

&#x1f31f; 各位看官好&#xff0c;我是maomi_9526&#xff01; &#x1f30d; 种一棵树最好是十年前&#xff0c;其次是现在&#xff01; &#x1f680; 今天来学习C语言的相关知识。 &#x1f44d; 如果觉得这篇文章有帮助&#xff0c;欢迎您一键三连&#xff0c;分享给更…

常见的服务器硬盘接口

常见的服务器硬盘接口有SATA、SAS、M.2、U.2 一、SATA接口 SATA&#xff08;Serial Advanced Technology Attachment&#xff09;是广泛应用于存储设备的串行接口标准&#xff0c;在服务器中主要用于连接大容量机械硬盘&#xff08;HDD&#xff09;或经济型固态硬盘&#xff…