三分钟在你的react项目中引入tailwindcss

前言:在vite搭建的react项目中引入并使用tailwindcss

一、初始化react项目

1、创建项目

在文件夹下右键打开终端并输入命令使用vite创建项目

pnpm create vite react-tailwind

选择react+javascript,并输入命令安装依赖并启动

2、安装tailwind

pnpm install -D tailwindcss postcss autoprefixer

安装好tailwind以及相关的依赖后,需要初始化tailwind的配置文件

npx tailwindcss init -p

发现根目录下新增了一个tailwind.config.js文件

3、配置配置文件

在tailwind.config.js中粘贴一下配置

/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html","./src/**/*.{js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [],
}

4、添加tailwind指令

在入口文件的css样式中加入下面三行代码

// index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

5、启动项目

现在你就可以在app.jsx中粘贴一下代码,测试tailwind是否生效啦

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

tailwind官网教程

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

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

相关文章

端到端性能体验稳定性优化常见方案

引言 作为一个服务端程序员&#xff0c;在一个领域深耕几年之后&#xff0c;会发现学习的新东西越来越少&#xff0c;这时候怎么办呢&#xff1f;就需要一边深耕&#xff0c;一边增加对相关横向团队的了解和交流&#xff0c;会发现原来端到端链路还有非常广阔的空间等着你去成长…

【AndroidAPP】权限被拒绝:[android.permission.READ_EXTERNAL_STORAGE],USB设备访问权限系统报错

一、问题原因 1.安卓安全性变更 Android 12 的安全性变更&#xff0c;Google 引入了更严格的 PendingIntent 安全管理&#xff0c;强制要求开发者明确指定 PendingIntent 的可变性&#xff08;Mutable&#xff09;或不可变性&#xff08;Immutable&#xff09;。 但是&#xf…

C之(14)gcov覆盖率

C之(14)gcov覆盖率 Author: Once Day Date: 2024年12月30日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: C语言_Once-Day的博客-CSDN博客 前些天…

简易屏幕共享工具-基于WebSocket

前面写了两个简单的屏幕共享工具&#xff0c;不过那只是为了验证通过截屏的方式是否可行&#xff0c;因为通常手动截屏的频率很低&#xff0c;而对于视频来说它的帧率要求就很高了&#xff0c;至少要一秒30帧率左右。所以&#xff0c;经过实际的截屏工具验证&#xff0c;我了解…

UE5 Debug的一些心得

1、BUG粗略可分为两类&#xff1a; 一种是显性的&#xff0c;编译直接就通不过&#xff0c;必须马上解决。 第二种是隐性的&#xff0c;新功能完成后&#xff0c;编译成功顺利运行&#xff0c;洋洋自得&#xff0c;而问题隐藏在幕后&#xff0c;测试之后才逐渐发现有问题&…

Django多字段认证的实现

Django多字段认证 需求&#xff1a; django认证的检查用户是username&#xff0c;如果使用 username和 手机号验证登录。 重写&#xff1a; ModelBackend 类下的 authenticate 方法 # 在对应应用下创建 utils.py""" 修改Django认证类&#xff0c;为了实现 …

Paperlib(论文管理工具)

Paperlib 是一个简单好用的论文管理工具。软件接入各学科数据库用于匹配论文元数据&#xff0c;逐步为每一个学科&#xff08;例如计算机科学&#xff0c;物理学等&#xff09;定制化数据库组合提高检索精度。尤其是精准的会议论文元数据检索能力。还可以管理你的论文&#xff…

c# 2024/12/27 周五

6《详解类型、变量与对象》36 详解类型、变量与对象 _1_哔哩哔哩_bilibili

Formality:匹配(match)是如何进行的?

相关阅读Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 匹配点、对比点和逻辑锥 匹配指的是Formality工具尝试将参考设计中的每个匹配点与实现设计中的相应匹配点进行配对&#xff0c;这里的匹配点包括对比点(Compare Point…

OpenStack-Dashboard界面简单修改

OpenStack Dashboard界面替换图片 一、dashboard界面Logo的路径及文件 dashboard的Logo存放&#xff08;在Controller节点&#xff09;的路径&#xff1a; /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/涉及需要修改的文件&#xff08;3个&…

分布式算法(五):初识ZAB协议

文章目录 一、什么是Zookeeper二、ZAB与Zookeeper的关系为什么Zookeeper不直接使用Paxos 三、ZAB简介1.名词解释提案&#xff08;Proposal&#xff09;事务&#xff08;Transaction&#xff09;原子广播&#xff08;Atomic Broadcast&#xff09; 2.集群角色领导者&#xff08;…

Mybatis 01

JDBC回顾 select 语句 "select *from student" 演示&#xff1a; 驱动包 JDBC 的操作流程&#xff1a; 1. 创建数据库连接池 DataSource 2. 通过 DataSource 获取数据库连接 Connection 3. 编写要执⾏带 ? 占位符的 SQL 语句 4. 通过 Connection 及 SQL 创建…

tensorboard的界面参数与图像数据分析讲解

目录 1.基础概念&#xff1a; (a)精确率与召回率&#xff1a; (b)mAP: (c)边界框损失&#xff1a; (d)目标损失&#xff1a; (e)分类损失&#xff1a; (f):学习率&#xff1a; 2.设置部分&#xff08;最右边部分&#xff09;&#xff1a; GENERAL&#xff08;常规设置…

关于HarmonyOS Next中卡片的使用方法

关于Harmony OS中卡片的使用方法 在Harmony OS中&#xff0c;静态卡片是一种非常有用的组件&#xff0c;用于提供应用内功能组件的交互和信息展示。本文将详细介绍如何在Harmony OS中使用静态卡片以及相关的API接口。 1. 概述 静态卡片是Harmony OS中的一种交互组件&#xf…

《计算机网络A》单选题-复习题库解析-2

目录 51、下列关于以太网网卡地址特点的说法中&#xff0c;不正确的是&#xff08; &#xff09;。 52、当一个Web Browser向一个使用标准服务器端口的Web Server提出请求时&#xff0c;那么在服务返回的响应包中&#xff0c;所使用的源端口是&#xff08; &#xff0…

软件工程期末大复习(三)

让我们来复习一下第三章的结构化分析与设计的内容&#xff0c;并做一些相关的题目。 3.1 概述 结构化分析与设计是一种系统开发方法&#xff0c;它强调将复杂问题分解成更小、更易于管理和解决的部分。这种方法基于结构化编程的原则&#xff0c;即通过将程序分解成模块来提高…

Linux总结之CentOS Stream 9安装mysql8.0实操安装成功记录

Linux总结之CentOS Stream 9安装mysql8.0实操安装成功记录 由于网上很多的mysql8.0安装教程都是老版本或者安装过程记录有问题&#xff0c;导致经常安装到一半需要删除重新安装。所以将成功的实操安装过程记录一下&#xff0c;方面后面查阅&#xff0c;大家还有问题的可以在此讨…

高等数学学习笔记 ☞ 无穷小与无穷大

1. 无穷小 1. 定义&#xff1a;若函数当或时的极限为零&#xff0c;那么称函数是当或时的无穷小。 备注&#xff1a; ①&#xff1a;无穷小描述的是自变量的变化过程中&#xff0c;函数值的变化趋势&#xff0c;绝不能认为无穷小是一个很小很小的数。 ②&#xff1a;说无穷小时…

KMP 2024 年总结,Kotlin 崛起的一年

2024 Google I/O 上正式官宣了 KMP&#xff08;Kotlin Multiplatform&#xff09;项目&#xff0c;它是 Google Workspace 团队的一项长期「投资」项目&#xff0c;由 JetBrains 开发维护和开源的项目&#xff0c;简单来说&#xff0c;JetBrains 主导&#xff0c;Google Worksp…

欧拉-伯努利梁自由波动的频散关系

梁和杆都是一维结构,但是梁的弯曲波比杆的纵波要复杂多。例如即使最简单的欧拉-伯努利(Euler-Bernoulli)梁的弯曲波也具有频散特征,且当梁的特征尺寸和弯曲波波长满足某个比值时,欧拉-伯努利梁不再适用,需要引入铁摩辛克(Timoshenko)梁模型。 考察某一欧拉-伯努利梁,长度…