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;