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

vite项目中引入tailwindcss,难倒AI的操作

官方教程

1. 创建您的项目

如果你还没有设置,请先创建一个新的 Vite 项目。最常见的方法是使用 Create Vite。

npm create vite@latest my-project
cd my-project

安装 Tailwind CSS

npm install tailwindcss @tailwindcss/vite

配置 Vite 插件

将插件添加到你的 Vite 配置中。@tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({plugins: [tailwindcss(),],
})

导入 Tailwind CSS

向 CSS 文件添加一个,用于导入 Tailwind CSS。@import

@import "tailwindcss";

开始构建过程

使用文件中配置的任何命令运行构建过程。npm run devpackage.json

npm run dev

开始在 HTML 中使用 Tailwind

确保编译后的 CSS 包含在 (框架可能会为你处理此问题) 中,然后开始使用 Tailwind 的实用程序类来设置内容的样式。

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

不要过渡依赖AI,数据更新不及时

原因是,demo需要样式,用到了tailwindcss,按照AI的操作步骤,各种报错,后来看了这篇博客https://juejin.cn/post/7469422957593575433;
在这里插入图片描述

http://www.lqws.cn/news/602173.html

相关文章:

  • Modbus协议
  • 数字图像处理学习笔记
  • Spring IOC容器核心阶段解密:★Bean实例化全流程深度剖析★
  • 菜谱大全——字符串处理艺术:从文本解析到高效搜索 [特殊字符][特殊字符]
  • 城市灯光夜景人像街拍摄影后期Lr调色教程,手机滤镜PS+Lightroom预设下载!
  • 自由学习记录(66)
  • RESTful API 设计原则深度解析
  • 转录组分析流程(六):列线图
  • 笨方法学python-习题12
  • JavaScript 安装使用教程
  • 解码知识整理,使您的研究更高效!
  • 分区表设计:历史数据归档与查询加速
  • [论文阅读] 人工智能 + 软件工程 | 从软件工程视角看大语言模型:挑战与未来之路
  • python训练day46 通道注意力
  • 2025-0701学习记录19——“问题-方法-洞见”框架做汇报
  • 半导体和PN结
  • socket编程
  • Android11 添加自定义物理按键事件监听回调
  • Vite 7.0 与 Vue 3.5:前端开发的性能革命与功能升级
  • 【Linux】进程
  • NLP——RNN变体LSTM和GRU
  • Android布局管理器实战指南:从LinearLayout到ConstraintLayout的优化之旅
  • Redis——常用指令汇总指南(一)
  • 【Python】断言(assert)
  • 监听器模式
  • [Python] -基础篇8-Python中的注释与代码风格PEP8指南
  • 【C++】inline的作用
  • InnoDB数据页
  • 61、【OS】【Nuttx】【构建】向量表
  • OpenCv基础(C++)