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;
vite项目中引入tailwindcss,难倒AI的操作_第1张图片

你可能感兴趣的:(css,css)