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

nodejs21: 快速构建自定义设计样式Tailwind CSS

  • Tailwind CSS 是一个功能强大的低级 CSS 框架,只需书写 HTML 代码,无需书写 CSS,即可快速构建美观的网站。

1. 安装 Tailwind CSS

  • React 项目中安装 Tailwind CSS:

1.1 安装 Tailwind CSS 和相关依赖

  • 安装 Tailwind CSS:
npm install -D tailwindcss
  • 初始化 Tailwind CSS 配置文件:
npx tailwindcss init
  • 这个命令会生成一个 tailwind.config.js 配置文件:
/** @type {import('tailwindcss').Config} */
module.exports = {content: [],theme: {extend: {},},plugins: [],
}

1.2 配置 tailwind.config.js

  • tailwind.config.js 文件中配置 Tailwind CSS,比如配置启用 JIT(即时模式):
// tailwind.config.js
module.exports = {content: ["./src/**/*.{html,js,jsx,ts,tsx}",  // 确保这里包含了 React 项目的文件路径],theme: {extend: {},},plugins: [],
}

1.3 配置 postcss.config.js(可选)

npm install -D postcss autoprefixer
  • 创建 postcss.config.js 文件并进行 postcss 配置
// postcss.config.js
module.exports = {plugins: {tailwindcss: {},autoprefixer: {},},
}

1.4 添加 Tailwind CSS 到CSS 文件

  • 导入 Tailwind CSS 的基础样式:
/* src/index.css (或src/App.css) *//* 导入 Tailwind 的基础样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;/* 可以添加你自己的自定义样式 */

1.5 React 项目导入 CSS 文件

  • React 项目中导入 CSS 文件,通常是在 src/index.jssrc/App.js 中。
// src/index.js 或 src/App.js
import './index.css';  // 引入 Tailwind 的样式

2. 使用 Tailwind CSS 样式

  • 可在https://play.tailwindcss.com/中进行在线编译。可以将 Tailwind CSS 理解为一种对原始 CSS 的 “简写”,它是一个 “实用类(utility-first)框架”。Tailwind CSS 并不直接提供像 Bootstrap 或其他 CSS 框架那样的组件(如按钮、卡片等),而是提供了一组原子类(atomic classes),这些类对应着标准 CSS 属性(如 margin, padding, color 等)。

例如:

  • 布局flex, grid, block, inline-block

  • 颜色bg-gray-800, text-white, hover:text-gray-300

  • 宽度 高度 padding marginw-30,h-30,p-6m-6

  • 边距m-4, p-2, mt-4, mb-4

  • 字体font-bold, text-lg, text-xl

在这里插入图片描述

Tailwind 提供了大量的工具类,允许你以非常快速的方式构建响应式布局和自定义设计。例如:

  • 使用 flexgrid 布局:

    <div className="flex justify-between items-center"><div className="flex-1">左侧内容</div><div className="flex-1">右侧内容</div>
    </div>
    
  • 颜色、边距和圆角:

    <div className="bg-blue-500 text-white p-4 rounded-lg">这是一个蓝色背景的卡片
    </div>
    

在这里插入图片描述

  • 可以在https://tailwindui.com/components/preview,https://tailwindui.com/components中查看并复制对应的设计到你的界面中。

相关文章:

nodejs21: 快速构建自定义设计样式Tailwind CSS

Tailwind CSS 是一个功能强大的低级 CSS 框架&#xff0c;只需书写 HTML 代码&#xff0c;无需书写 CSS&#xff0c;即可快速构建美观的网站。 1. 安装 Tailwind CSS React 项目中安装 Tailwind CSS&#xff1a; 1.1 安装 Tailwind CSS 和相关依赖 安装 Tailwind CSS: npm…...

从JSON数据提取嵌套字段并转换为独立列的简洁方法

从JSON数据提取嵌套字段并转换为独立列的简洁方法 在数据处理和数据分析的日常工作中&#xff0c;我们经常遇到复杂的嵌套数据结构&#xff0c;特别是嵌入在JSON字段中的数据。这些数据往往需要解析并展开成独立的列&#xff0c;以便后续分析和建模。本文将详细介绍如何在Pyth…...

湘潭大学软件工程算法设计与分析考试复习笔记(四)

回顾 湘潭大学软件工程算法设计与分析考试复习笔记&#xff08;一&#xff09;湘潭大学软件工程算法设计与分析考试复习笔记&#xff08;二&#xff09;湘潭大学软件工程算法设计与分析考试复习笔记&#xff08;三&#xff09; 前言 现在是晚上十一点&#xff0c;我平时是十…...

特征交叉-DeepCross Network学习

一 tensorflow官方实现 tensorflow的官方实现已经是V2版本 class Cross(tf.keras.layers.Layer):"""Cross Layer in Deep & Cross Network to learn explicit feature interactions.Args:projection_dim: int&#xff0c;低秩矩阵的维度&#xff0c;应该小…...

stm32cubemx+VSCODE+GCC+makefile 开发环境搭建

title: stm32cubemxVSCODEGCCmakefile 开发环境搭建 tags: FreertosHalstm32cubeMx 文章目录 内容往期内容导航第一步准备环境vscode 插件插件配置点灯 内容 往期内容导航 第一步准备环境 STM32CubeMXVSCODEMinGWOpenOcdarm-none-eabi-gcc 然后把上面下载的软件 3 4 5 bin 文…...

Go语言中的Defer机制详解与示例

在Go语言中&#xff0c;defer是一个关键字&#xff0c;用于确保资源的清理和释放&#xff0c;特别是在函数中创建的资源。defer语句会将其后的函数调用推迟到包含它的函数即将返回时执行。这使得defer成为处理文件关闭、数据库连接释放、解锁等资源清理操作的理想选择。 Defer…...

H.265流媒体播放器EasyPlayer.js H5流媒体播放器如何验证视频播放是否走硬解

随着技术的不断进步和5G网络的推广&#xff0c;中国流媒体播放器行业市场规模以及未来发展趋势都将持续保持稳定的增长&#xff0c;并将在未来几年迎来新的发展机遇。流媒体播放器将继续作为连接内容创作者和观众的重要桥梁&#xff0c;推动数字媒体产业的创新和发展。 EasyPla…...

ms-hot目录

1. ms-hot1...

vulfocus在线靶场:骑士cms_cve_2020_35339:latest 速通手册

目录 一、启动环境&#xff0c;访问页面&#xff0c;ip:端口号/index.php?madmin,进入后台管理页面&#xff0c;账号密码都是adminadmin 二、进入之后&#xff0c;根据图片所示&#xff0c;地址后追加一下代码&#xff0c;保存修改 ​三、新开标签页访问&#xff1a;①ip:端…...

AI Large Language Model

AI 的 Large Language model LLM , 大语言模型&#xff1a; 是AI的模型&#xff0c;专门设计用来处理自然语言相关任务。它们通过深度学习和庞大的训练数据集&#xff0c;在理解和生成自然语言文本方面表现出色。常见的 LLM 包括 OpenAI 的 GPT 系列、Google 的 PaLM 和 Meta…...

React Native的`react-native-reanimated`库中的`useAnimatedStyle`钩子来创建一个动画样式

React Native的react-native-reanimated库中的useAnimatedStyle钩子来创建一个动画样式&#xff0c;用于一个滑动视图的每个项目&#xff08;SliderItem&#xff09;。useAnimatedStyle钩子允许你根据动画值&#xff08;在这个例子中是scrollX&#xff09;来动态地设置组件的样…...

FastJson反序列化漏洞(CVE-2017-18349)

漏洞原理 原理就不多说了&#xff0c;可以去看我这篇文章&#xff0c;已经写得很详细了。 Java安全—log4j日志&FastJson序列化&JNDI注入-CSDN博客 影响版本 FastJson<1.2.24 复现过程 这里我是用vulfocus.cn这个漏洞平台去复现的&#xff0c;比较方便&#x…...

【优选算法篇】分治乾坤,万物归一:在重组中窥见无声的秩序

文章目录 分治专题&#xff08;二&#xff09;&#xff1a;归并排序的核心思想与进阶应用前言、第二章&#xff1a;归并排序的应用与延展2.1 归并排序&#xff08;medium&#xff09;解法&#xff08;归并排序&#xff09;C 代码实现易错点提示时间复杂度和空间复杂度 2.2 数组…...

C++:探索AVL树旋转的奥秘

文章目录 前言 AVL树为什么要旋转&#xff1f;一、插入一个值的大概过程1. 插入一个值的大致过程2. 平衡因子更新原则3. 旋转处理的目的 二、左单旋1. 左单旋旋转方式总处理图2. 左单旋具体会遇到的情况3. 左单旋代码总结 三、右单旋1. 右单旋旋转方式总处理图2. 右单旋具体会遇…...

2. Django中的URL调度器 (自定义路径转换器)

在 Django 中&#xff0c;URL 路由通常使用路径转换器&#xff08;path converters&#xff09;来匹配和捕获 URL 中的特定模式&#xff0c;例如整数、字符串或 slug 等。默认情况下&#xff0c;Django 提供了一些内置的路径转换器&#xff0c;如 <int>、<str>、&l…...

深度学习:神经网络中线性层的使用

深度学习&#xff1a;神经网络中线性层的使用 在神经网络中&#xff0c;线性层&#xff08;也称为全连接层或密集层&#xff09;是基础组件之一&#xff0c;用于执行输入数据的线性变换。通过这种变换&#xff0c;线性层可以重新组合输入数据的特征&#xff0c;并将其映射到新…...

【刷题】算法设计题+程序设计题【2】2019-2024

11.202019年真题*2BST二叉排序树分裂、双向冒泡排序 2019 真题 【2019 1】编写算法&#xff0c;将一棵二叉排序树 分解成两棵二叉排序树 t1和t2&#xff0c;使得t1中的所有结点关键字的值都小于x&#xff0c;t2中所有结点关键字都大于x。 typedef struct BSTNode{int data;str…...

搭建es环境

centos7搭建elasticsearch环境 首先考虑使用 Docker 来安装 Elasticsearch、Kibana 和 Logstash。在安装过程中&#xff0c;可能会遇到一些问题&#xff0c;但通过适当的方法可以解决。 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.14.3 首先创建一个网络&a…...

阿里云和七牛云对象存储区别和实现

七牛云对象存储操作&#xff08;QiniuUtil&#xff09; 配置&#xff1a;使用 com.qiniu.storage.Configuration 类来配置上传设置&#xff0c;如指定区域&#xff08;Region&#xff09;和分片上传版本。上传管理器&#xff1a;通过 UploadManager 类来处理文件上传。认证&am…...

uniapp微信小程序接入airkiss插件进行WIFI配网

本文可参考uniapp小程序插件 一.申请插件 微信公众平台设置页链接&#xff1a;微信公众平台 登录您的小程序微信公众平台&#xff0c;进入设置页&#xff0c;在第三方设置->插件管理->添加插件中申请AiThinkerAirkissforWXMini插件&#xff0c;申请的插件appId为【wx6…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...