使用 Nuxt 安装 Tailwind CSS - Tailwind CSS 中文

我们正在招聘设计工程师 + 软件工程师

安装
使用 Nuxt 安装 Tailwind CSS

创建您的项目
如果您还没有设置，请先创建一个新的 Nuxt 项目。最常见的方法是使用 Nuxt 命令行界面。
终端
```
npx nuxi init my-projectcd my-project
```
安装 Tailwind CSS
通过 npm 安装 tailwindcss 及其对等依赖项，然后运行 init 命令生成 tailwind.config.js 文件。
终端
```
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init
```

将 Tailwind 添加到您的 PostCSS 配置中

在 nuxt.config.js 文件中的 postcss.plugins 对象中添加 tailwindcss 和 autoprefixer。

nuxt.config.js

// https://nuxtjs.org.cn/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

配置您的模板路径

在 tailwind.config.js 文件中添加所有模板文件路径。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到您的 CSS 中
创建一个 ./assets/css/main.css 文件，并为 Tailwind 的每个层添加 @tailwind 指令。
main.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

全局添加 CSS 文件

将新创建的 ./assets/css/main.css 添加到 nuxt.config.js 文件中的 css 数组中。

nuxt.config.js

// https://nuxtjs.org.cn/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

启动您的构建过程
使用 npm run dev 运行您的构建过程。
终端
```
npm run dev
```
开始在您的项目中使用 Tailwind
开始使用 Tailwind 的实用程序类来设置您的内容样式。
app.vue
```
<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>
```