在 Nuxt 3 中为 <html>
和 <body>
标签添加 Tailwind CSS 类,可以参考以下步骤:
- 安装 Tailwind CSS:在项目根目录下运行以下命令安装 Tailwind CSS 和其依赖:
npm install tailwindcss@latest @tailwindcss/typography@latest postcss@latest autoprefixer@latest
- 创建 Tailwind CSS 配置文件:在项目根目录下创建 tailwind.config.js 文件,可以使用以下命令进行初始化:
npx tailwindcss init
- 配置 Nuxt.js:打开 nuxt.config.js 文件,将以下代码添加到
css
数组中:
css: [
'~/assets/css/tailwind.css'
],
- 创建 Tailwind CSS 样式文件:在项目的
assets/css
目录中创建一个名为 tailwind.css 的文件。在该文件中添加以下内容:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
- 修改 Nuxt.js 模板文件:打开项目的根模板文件(例如 default.vue 或 app.vue),在
<html>
或<body>
标签上添加class
属性,并为其赋予 Tailwind CSS 的类名:
<template>
<html class="text-gray-900">
<body class="bg-white">
<!-- 页面内容 -->
</body>
</html>
</template>
通过以上步骤,你可以在 Nuxt 3 中为 <html>
和 <body>
标签添加 Tailwind CSS 类。确保按照正确的路径和命名创建文件,并在配置文件中正确引用。