vue3接入tailwindcss3

前几天看了篇文章,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,和之前的一些教程不太一样。

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

相关推荐
幽络源小助理28 分钟前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef062 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端3 小时前
今天介绍下最新更新的Vite7
前端·vue.js
做梦都在学习前端5 小时前
发布一个monaco-editor 汉化包
前端·npm·vite
炒毛豆5 小时前
vue3.4中的v-model的用法~
前端·vue.js
小桥风满袖5 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Hilaku6 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
阳火锅6 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水7 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了7 小时前
实现一个简单的Vue响应式
前端·vue.js