Nuxt3引入TailwindCSS

Nuxt3文档：Nuxt: The Intuitive Vue Framework · Nuxt

tailwind中文文档：安装 - TailwindCSS中文文档 | TailwindCSS中文网

1.安装tailwind及其依赖

npm install -D tailwindcss postcss autoprefixer

2.在assets中创建tailwind.css文件

由于我的css文件放在styles中，tailwind.css文件我也放在了styles中，我的目录结构

​

/* tailwind.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

3.生成tailwind.config.js文件并配置

接下来,运行以下命令，这将在项目的根目录下创建一个 tailwind.config.js 文件:

npx tailwindcss init

接下来配置你的 tailwind.config.js，

注：content中的路径要与你的文件路径对应

/* tailwind.config.js */
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/components/**/*.{js,vue,ts}",
    "./src/layouts/**/*.vue",
    "./src/pages/**/*.vue",
    "./src/plugins/**/*.{js,ts}",
    "./src/app.vue",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

4.配置你的nuxt.config.js

css，与第二步创建的文件路径对应

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    "~/assets/styles/tailwind.css",
  ],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

5.在页面文件中使用tailwind属性

<template>
  <div>
    <div class="m-20 bg-sky-300">-mt-8</div>
    <input
      placeholder="请输入..."
      class="w-1/3 border-4 border-green-500"
    />
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped></style>

可以看到如下效果：

​

完成了！！