vue3 + vite 配置tailwindcss

vue3vitetailwindcss
2024-03-14 11:26:11
  1. 如果您还没有设置Vite项目，请先创建一个新的Vite项目。最常见的方法是使用Create Vite。
sh 复制代码 
npm create vite@latest my-project -- --template vue
cd my-project
  1. 安装 tailwindcss 及其对等依赖项，然后在项目根目录生成 tailwind.config.js 和 postcss.config.js 文件
sh 复制代码 
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
  1. 将下面文件复制到 tailwind.config.js 文件中的所有模板文件。
sh 复制代码 
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. 将Tailwind的每个层的 @tailwind 指令添加到您的 ./src/style.css 文件中。并在main.js当中导入这个文件
css 复制代码 
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 开始使用Tailwind的实用程序类来设置内容的样式。
html 复制代码 
<template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>