Nuxt3如何使用Tailwindcss？

最近在Nuxt3项目中使用tailwindcss碰到一些问题，经研究后把问题解决，为避免此类问题特此把解决过程写下来做个记录。

Nuxt3官网

tailwindcss官网

创建Nuxt3应用

须确保node.js版本大于16.11

Nuxt3创建命令 ：

npx nuxi init <project-name>

在vs code中打开 <project-name> 文件夹：

code <project-name>

 安装依赖项：

yarn install
// or
npm install

启动Nuxt应用：

yarn dev -o

安装Tailwindcss

1、通过yarn或npm安装 tailwindcss 及其依赖项

yarn add -D tailwindcss postcss autoprefixer
// or
npm install -D tailwindcss postcss autoprefixer

安装好的依赖在package.json当中查看。 

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@types/node": "^18.14.3",
    "autoprefixer": "^10.4.13",
    "nuxt": "^3.2.2",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7"
  },
  "dependencies": {}
}

2、然后运行init命令生成文件 ‘tailwind.config.js’

npx tailwindcss init

3、添加 ‘tailwindcss’ 和 ‘autoprefixer’ 到nuxt.config.ts文件当中。

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

4、配置模板路径 ---- 将路径添加到tailwind.config.js文件中

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

5、将 Tailwind 指令添加到Nuxt3项目CSS当中

在assets/css文件夹下创建一个名为 ‘tailwind.css’的文件，并把下列代码添加到 ‘tailwind.css’文件当中；创建好的目录层级应为 ‘assets/css/tailwind.css’

@tailwind base;
@tailwind components;
@tailwind utilities;

6、全局添加CSS文件

将新创建的 ‘tailwind.css’文件路径添加到 ‘nuxt.config.ts’文件中。路径为‘~/assets/css/tailwind.css’

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['~/assets/css/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

7、启动项目

yarn dev
// or
npm run dev

使用Tailwindcss

前期准备工作已经做完，下面写个小Demo来验证；

第一步先写下一个input输入框

<input placeholder="请输入"/>

浏览器查看可以看到我们写的输入框只有placeholder提示并显示没有边框等其他属性；这是由于tailwindcss预处理样式导致；

接下来我们为输入框添加边框

<input placeholder="请输入..." class="border" />

这时候可以看到输入框的边框已经显示出来了；

我们可以再添加一些 tailwindcss 样式类 把输入框变得更美观

 <input
        class="w-1/3 border-4 border-green-500 px-2 py-2 rounded-lg placeholder-green-500 block border-double focus:outline-none focus:ring focus:border-blue-500"
        placeholder="请输入..."
      />

选中效果

 

 <input
        class="w-1/3 border-4 px-2 py-2 placeholder-orange-400 border-orange-400 rounded-lg block focus:outline-none focus:ring focus:border-orange-500 ring-yellow-400"
        placeholder="请输入..."
      />

 

 选中效果

通过浏览器查看我们可以确定tailwindcss在Demo已经生效。

需要tailwindcss在项目中发挥更大的作用，可以查看Tailwindcss文档学习使用；

 记录到此告一段落~~~