vue3接入tailwindcss3

小遁哥2025-03-30 15:55

前几天看了篇文章，Tailwind CSS 都更新到 4.0 了，你还在抵触吗？，确实打动了我，想学一下 tailwindcss

第一步要先访问官网，www.tailwindcss.cn/docs/instal...

当然了这个官网不是很纯，4 的指引在这 tailwindcss.com/docs/instal...

第二步点击 Framework Guides，注意版本是 v3.4.17

第三步点击 Vite

第四步点击 Using vite

执行npm install -D tailwindcss@3 postcss autoprefixer 如果按照官网的去执行就会安装 4，后面就会报: $vite$ Internal server error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.。

根目录创建 tailwind.config.js ，教程中使用npx tailwindcss init -p命令，但是我执行这个命令就会报错：npm WARN config global --global, --local are deprecated. Use --location=global instead. 试着解决但是没用，就先手动创建了。

css 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

我的 postcss.config.js 如下，官网并没有给出

css 复制代码

module.exports = {
  plugins: [
    require("postcss-preset-env"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

也可能是

ini 复制代码

module.exports = {
  plugins: [
    tailwindcss：{}
    autoprefixer:{}
  ],
};

在 src 目录下创建 style.css

less 复制代码

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

在 main.ts 中引入

arduino 复制代码

import "./style.css";

使用下列代码查看效果

scss 复制代码

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

一开始我先想到的就是官网，百度没找到，就用谷歌，看完安装发现没有，就没注意到英文的 Framework Guides，和之前的一些教程不太一样。

然后我又搜文章，发现很多都过时了，众说纷纭，又回来找官网，没想到官网上也有坑，我试了试人工智能，回答的也很潦草，但起码官网给了个大致的方向。